как верстать на телефоне

Верстка для мобильных устройств

Общая информация

Так как мобильных устройств существует великое множество, то одна модель может поддерживать какие-либо возможности HTML/CSS, а другая наоборот — либо не поддерживать, либо поддерживать неправильно.

Но большинство устройств среднего и уж тем более hi-end класса поддерживают HTML/CSS в той или иной степени. Таким образом, язык WML для разработки сайтов под мобильные устройства устарел и практически не используется. На смену ему постепенно приходит общепризнанный стандарт в разработке сайтов — XHTML/CSS. Кодировка — строго UTF-8 (No BOM).

DOCTYPE, используемый для мобильных устройств

Практически везде на известных мобильных сайтах, таких как Google, Яndex, используется DOCTYPE XHTML Mobile 1.0:

Также, иногда встречаются сайты с DOCTYPE XHTML Basic 1.1:

На мой взгляд, предпочтительнее использовать первый вариант.

Особенности верстки

Подключение CSS

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

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

Сокращенная запись свойств

Фон элементов

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

Изображения

В итоге, каждое изображение, вставленное в документ должно иметь вид:

Таблицы

Списки

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

Шрифты

Плавающие элементы

Тестирование

Источник

Верстаем на мобильном: отладка сайтов с помощью телефона

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

Рассмотрим варианты для Chrome и Firefox. Для начала, независимо от браузера, нужно подготовить устройства и установить драйвера.

Скачиваем и устанавливаем ADB-драйвера для своего телефона. Драйвера можно взять либо с сайта Android, либо на форуме 4pda.ru.

Включаем на телефоне режим отладки. Для этого в настройках переходим в меню разработчика. Если его нет — переходим в раздел «О телефоне» и кликаем несколько раз по пункту «Номер сборки». У меня режим разработчика уже включён, поэтому отображается соответствующее сообщение. Затем в самом меню, наверху, активируем режим, находим пункт «Режим отладки» и активируем его тоже.

На этом общие моменты завершены. Теперь посмотрим как подключать телефон и как инспектировать элементы сайта на мобильном.

Инструкция для Google Chrome

Для отладки в Chrome, на компьютере должен быть установлен браузер версии не ниже 32, а на версия Android должна быть минимум 4.

Открываем инструменты разработчика в браузере. Кликаем по трём точкам в правом верхнем углу. Выбираем «More tools», затем «Inspect devices…»

Ставим галочку «Discover USB devices».

Запускаем Chrome на телефоне и подключаем его к компьютеру. Появится запрос на подключение. Жмём «Ок».

Видим слева своё устройство и его статус. Кликаем по нему.

Отображается список открытых вкладок. Можно открыть новую, введя адрес в поле сверху. Нажав на три точки, можем перезагрузить вкладку, перейти на неё или закрыть её. Нажав «Inspect», как несложно догадаться, активируем инспектор.

Видим экран мобильного на компьютере. Все изменения стилей отображаются на экране компьютера и на самом смартфоне в режиме реального времени. Если изменить ориентацию телефона — изменится и на компьютере.

Инструкция для Mozilla Firefox

На Firefox подобное сработает только на версии новее 36.

Запускаем Firefox на мобильном. Переходим в настройки, затем в «Дополнительно» и включаем удалённую отладку.

Переходим в меню Firefox на десктопе. Выбираем «разработка», затем «WebIDE».

Подключаем телефон, видим его справа сверху. Кликаем по нему.

Разрешаем доступ на мобильном.

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

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

Бонус: отладка сайтов по WiFi

Работает пока, к сожалению, только на Firefox и только на версиях от 39 и выше. Чтобы всё сработало, компьютер и телефон должны быть подключены к одной сети. Плюс к этому, на телефоне должен быть установлен сканер QR-кодов. Firefox рекомендует этот. Другие, к слову, Firefox у меня не распознал и упорно твердил, что программа-сканер не установлена.

Снова переходим в WebIDE, но на этот раз выбираем WiFi устройства.

Появится QR-код для сканирования.

На телефоне появится запрос. Нажимаем «сканировать» и сканируем код.

Источник

Адаптивная верстка для мобильных устройств

Дисклаймер: материал был написан до того, как адаптивная верстка стала трендом.

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

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

Итак, для верстки нам потребуются следующие элементы:

Общее понимание разрешений мобильных устройств

Да, это именно так. Яндекс выдает нам множество вариантов. Становится ясно, что разрешений очень много. Верстать под все разрешения нет возможности.

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

Эти три параметра могут дать нам море информации. Пишем простую функцию:

Например на Iphone мы увидим «2 320 568 640 1136», на айпад «2 768 1024 1536 2048». Lenovo P780 cообщит «1,5 360 640 540 960». Т.е. ширины экранов у перечисленных устройств будут 640, 1536, 540 пикселей соответственно. Делаем выводы: нам надо сделать версию для экранов, например, меньше 986 пикселей (стандарт для узких мониторов). Образно говоря, будет две верстки. Одна для экранов с разрешением более 986 пикселей, другая — для меньших. Особенности CSS-верстки будут описаны в последнем разделе.

Задание размера viewport

О viewport можно найти в поиске много мусора. Почти везде идет ширпотреб без объяснения логики. На самом деле тут всё очень просто:

Вьюпорт (viewport) — это видимая часть окна браузера (мобильного или десктопного).

Размер вьюпорта можно менять, используя следующую конструкцию в head:

Для верстки используем только два параметра width и user-scalable. Первым задаем размер видимой части, второй разрешает ее увеличивать (применять zoom двумя пальцами).

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

Можно вручную задать значение для width. Например content=»width=600″, но этого не рекомендуем, потому-что различные носимые устройства могут иметь абсолютно различную ширину экрана.

Более подробно про viewport можно прочитать в статье «Адаптация сайта на мобильных устройствах».

СSS и MediaQuery в мобильной верстке

MediaQuery разжевано на множестве сайтов, уделять внимание описанию не будем. Лишь опишем ряд проблем в виде маленького ЧАВО.

Какой диапазон выбрать для MediaQuery при адаптивной верстке?

В работе мы использует три брекпоинта для носимых устройств: 1024px, 800px, 420px. Это рекомендация, вы можете спокойно добавить свои.

Мелкий текст в адаптивной/мобильной верстке сайта.

Решение: стоит увеличить размер шрифта в соответствии с devicePixelRatio или просто в 1,5 раза. Например, так:

Изменяется размер шрифта при смене ориентации/вращении мобильного устройства.

Гироскопом уже никого не удивишь, его ставят китайцы даже в самые дешевые смартфоны. Удивить можно верстальщика. Решение:

Сбрасываем форматирование для элементов форм

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

Safari в IOs увеличивает шрифты в верстке

Mobile Safari в Ios (а также Chrome для Android, Mobile Firefox и IE Mobile) автоматически увеличивают размер шрифта внутри широких блоков. Это можно пофиксить двумя строчками CSS:

Источник

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

( пользоваться не рекомендуется, deprecated )
AbsoluteLayout — означает что каждый элемент верстки будет иметь абсолютную позицию относительно верхнего левого угла экрана задаваемую с помощью координат x и y. Т.е. верхнийлевый угол экрана при AbsoluteLayout имеет координаты x = 0, y = 0.
Позиция указывается в атрибутах элемента android:layout_x и android:layout_y.
Пример кода:

FrameLayout

FrameLayout — тип верстки внутри которого может отображаться только один элемент в строке. Т.е. если внутри FrameLayout вы поместите несколько элементов, то следующий будет отображаться поверх предыдущего.
Пример кода:

LinearLayout

LinearLayout — тип верстки при котором область верстки делится на строки и в каждую строку помещается один элемент. Разбиение может быть вертикальное или горизонтальное, тип разбиения указывается в атрибуте LinearLayout android:orientation. Внутри верстки возможно комбинировать вертикальную и горизонтальную разбивки, а кроме того, возможна комбинация нескольких разных типов верстки например использование LinearLayout внутри FrameLayout.

Пример вертикальной разбивки LinearLayout:

Пример горизонтальной разбивки LinearLayout:

Комбинация нескольких LinearLayout:

RelativeLayout

android:layout_above – Распологает элемент над указанным
android:layout_below – Распологает элемент под указанным
android:layout_toLeftOf – Распологает элемент слева от указанного
android:layout_toRightOf – Распологает элемент справа от указанного

Выравнивание относительно других элементов.

android:layout_alignBaseline – Выравнивает baseline элемента с baseline указаннго элемента
android:layout_alignBottom – Выравнивает низ элемента по низу указанного элемента
android:layout_alignLeft – Выравнивает левый край элемента с левым краем указанного элемента
android:layout_alignRight – Выравнивает правый край элемента с правым краем указанного элемента
android:layout_alignTop – Выравнивает верхнюю часть элемента в соответствие с верхней частью указанного элемента

TableLayout

TableLayout — табличная верстка.
Организует элементы в строки и столбцы таблицы.
Для организации строк служит таг

Alternate Layouts

res/layout-land – альтернативная верстка для landscape UI
res/layout-port –альтернативная верстка для portrait UI
res/lauout-square – альтернативная верстка для square UI

и перед тем как получить макет из res/lauout система проверяет наличие файлов в этих папках.

И в завершении немного о стилях.

Стили

Во первых стили элемента могут быть описаны в атрибутах самого элемента.
Например:

Кроме того стили можно вынести в отдельный xml файл и сохранить его в папке res/values/
Напимер:

Если мы вынесем стили в отдельный файл, то для описания стилей элемента будем использовать атрибут style.

Источник

Pixel-perfect верстка Android макетов

Разрабатывать интерфейс Android приложений — непростая задача. Приходится учитывать разнообразие разрешений и плотностей пикселей (DPI). Под катом практические советы о верстке макетов дизайна Android приложений в Layout, который совпадает с макетом на одном устройстве а на остальных растягивается без явных нарушений дизайна: выхода шрифтов за границы; огромных пустых мест и других артефактов.

UPD: Пост спорный, но много ценных советов в комментариях

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

Используйте разные значения размера шрифта для разных разрешений экрана.
в values\dimens.xml text_size=16sp
в values-sw600dp\dimens.xml text_size=20sp
в values-sw720dp\dimens.xml text_size=24sp

Если нужно, присмотритесь к нашей идее в посте.

На iPhone layout задаются абсолютно и всего под два экрана iPhone 4 и iPhone 5. Рисуем два макета, пишем приложение и накладываем полупрозрачные скриншоты на макеты. Проблем нет, воля дизайнера ясна, проверить что она исполнена может сам разработчик, тестировщик или, даже, билд-сервер.

Под Android у нас две проблемы: нельзя нарисовать бесконечное число макетов и нельзя сверить бесконечное число устройств с конечным числом макетов. Дизайнеры проверяют вручную. Разработчики же часто понятия не имеют как правильно растягивать элементы и масштабировать шрифты. Количество итераций стремится к бесконечности.

Чтобы упорядочить хаос мы пришли к следующему алгоритму верстки. Макеты рисуются и верстаются под любой флагманский full-hd телефон. На остальных красиво адаптируются. Готовое приложение проверяет дизайнер на популярных моделях смартфонов. Метод работает для всех телефонов, для планшетов (>6.5 дюймов) требуются отдельные макеты и верстка.

Под рукой у меня только Nexus 4 возьмем его характеристики экрана для примера.

Макеты ненастоящего приложения-портфолио которые будем верстать (полноразмерные по клику).

Layout

Основную верстку делаем через вложенные LinearLayout. Размеры элементов и блоков в пикселях переносим с макета в weight и weightSum соответственно. Отступы верстаем FrameLayout или в нужных местах добавляем Gravity.

Для примера сверстаем ячейку списка приложений:

Дальше нам потребуется много DisplayMetrics-магии, напишем для него static helper.

1184 это высота Nexus 4 без кнопок, 768 — ширина. Эти значения используются, чтобы выяснить во сколько раз высота и ширина устройства, на котором запущено приложение, отличаются от эталонного.

ScrollView и List

Подход с weightSum не примемим к прокручивающимся элементам, их внутренний размер вдоль прокрутки ничем не ограничен. Для верстки ScrollView и List нам потребуется задать их размеры в коде (130 — высота элемента списка).

И дальше можно применять трюк с weightSum.

Картинки

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

Где 240 высота элемента списка, 20 высота отступа сверху и снизу.

Шрифты

Андроид не предоставляет единицу измерения пропорциональную размеру экрана. Размеры шрифтов рассчитываем на основании диагонали устройства:

Да, размеры шрифта придется задавать в коде (36 размер шрифта в пикселях на оригинальном макете).

Советы по работе с графикой

1. Используйте Nine-patch везде где возможно, где невозможно — перерисуйте дизайн.
2. Простые элементы рисуйте с помощью Shape
3. Избегайте масштабирования изображений в runtime

Nine-patch это графический ресурс содержащий в себе мета-информацию о том как он должен растягиваться. Подробнее в документации Android или на Хабре.

Nine-patch нужно нарезать под все dpi: ldpi mdpi tvdpi hdpi, xhdpi, xxhdpi. Масштабирование ресурсов во время работы приложения это плохо, а масштабирование Nine-Patch приводит к неожиданным артефактам. Ни в коем случае не задавайте в Nine-patch отступы, они оформляются отдельными элементами layout, чтобы растягиваться пропорционально контенту.

Shape

Если ресурс легко раскладывается на простые геометрические фигуры и градиенты лучше вместо нарезки использовать xml-shape. Для примера нарисуем фон рамку вокруг проекта в списке, которую мы выше нарезали как Nine-patch.

Картинки

Масштабирование графики силами Android трудоемкая и затратная по памяти операция. Картинки внутри Android обрабатываются как bitmap. Например, наш логотип в размере 500×500 со сплешскрина распакуется в bitmap размером 1мб (4 байта на пиксель), при масштабировании создается еще один bitmap, скажем в 500кб. Или 1,5мб из доступных 24мб на процесс. Мы не раз сталкивались с нехваткой памяти в богатых на графику проектах.

Поэтому картинки которые нельзя описать ни Nine-patch ни Shape я предлагаю поставлять в приложении как огромный ресурс в папке nodpi и при первом запуске масштабировать изображение до нужного размера и кешировать результат. Это позволит нам ускорить работу приложения (не считая первого запуска) и уменьшить потребление памяти.

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

P.S. советы придуманы и основа поста написаны нашим Android-гуру Лешей, огромное ему спасибо!

А как вы рекомендуете верстать макеты под Android? Сколько макетов рисует дизайнер? Как обращаетесь с графическими ресурсами?

Подписывайтесь на наш хабра-блог (кнопка справа вверху). Каждый четверг интересные статьи о мобильной разработке, маркетинге и бизнесе мобильной студии. Следующая статья (5 сентября) «C# async на iOS и Android»

Источник