Особенности дизайна сайта для мобильных устройств
Речь пойдет о мобильных устройствах, которые на данное время занимают большой % на рынке WAP’a (телефоны без ОС, Symbian и прочие), об Android и iPhone сегодня говорить не будем
Давайте посмотрим на модели телефонов и разрешения экранов посетителей одного крупного WAP-портала. Как видно среди браузеров лидирует с большим отрывом Opera Mini (ей надо посвящать целую тему, сейчас рассматривать не будем), а дальше обычные мобильные телефоны с или без ОС. Android и iPhone там нет из-за очень низкого %
Посмотрим на экраны. Хватает первых двух позиций: 240х320, 128х160. Что это нам говорит?
Так выглядит шапка сайта:
Третью снизу строчку иногда не пишут, а копируют на страницу весь css в тег <style> Почему? Узнал у владельца одного крупного портала, что старенькие Nokia не умеют обращаться с css, как отдельным файлом (но % таких очень мал).
Вторая снизу, как вы поняли, отвечает за иконку сайта. Делается обычная PNG-иконка 16х16 пикселей и переименовывается в favicon.ico
Вы заметили в шапке слово XHTML? Это значит что надо строго следовать правилам разметки этого языка, иначе последствия будут печальными.
Вся информация, что выводится на экран в теге <body>, должна содержаться внутри <div>, иначе получим ошибку валидатора (рекомендую именно этот), конечно. Стоит помнить что лучше не использовать <div id="">, валидатор опять будет ругаться. Следует id заменить на class. Классов может быть несколько, что очень удобно для больших проектов. Почему я заговорил о валидаторе? Если на сайте есть ошибки, то будьте готовы что некий % мобильных телефонов не смогут попасть на сайт
Пример ошибок:
Сейчас модно делать сайт «полоской» (200-700px в среднем), можно, но с телефона на экране 128х160 вы этого не увидите. Это делается для красоты, которую оценит только компьютер, но все же давайте посмотрим как правильно делать (встречаются сайты, где дизайн идет полоской и выравнивается по левому краю — убого смотрится):
Но лучше придерживаться классического стиля, ведь сайт-то для мобильных устройств, а не компьютеров
Старайтесь не трогать свойства input в css, а если надо — делайте с умом (с параметром type=text, например, а то делают красивое поле ввода, а чекбоксы, радиобаттоны смотрятся ужасно)
О сочетании цветов. Большинство крупных проектов стараются делать дизайн в 2-3 цветах. Много цветов никогда не портят дизайн, если их хорошо скомбинировать. Надо помнить, что на экране мобильного телефона дизайн выглядит не как на компьютере. Иногда очень красиво выглядят дивы, которые плавно меняют цвет (картинка 15-30px высотой), но ключевое слово, как вы уже поняли, «плавно». Очень много браузеров сами “сжимают” картинки (даже фоновые). Представьте как выглядит картинка высотой 20 пикселей с градиентом от #aaa до #222 в таких браузерах. Я вам подскажу – будет несколько линий высотой по пару пикселей. Это очень портит впечатление о дизайне сайта.
В продолжении о цветах и фонах. Очень много «умельцев» делают так:
Сама картинка – это градиент от #ccc до #bbb. Высота дива — 12 пикселей (например, див со ссылками «вход, регистрация, забыли пароль?»), но так он выглядит на компьютере. Какое расширение экрана занимает второе место?
Возможно это очевидно, но очень часто такое встречается.
В следующем топике буду рассматривать реальные дизайны и анализировать их, ведь на практике (примерах) материал намного лучше воспринимается :)
UPD: На счет того, что css вставляют в саму страничку мне написал в ICQ один человек: «CSS внутри страницы вставляют для того, чтобы как можно меньше было новых соединений. Потому что на создание соединения тратится больше времени, чем на отрисовку страницы.»
Давайте посмотрим на модели телефонов и разрешения экранов посетителей одного крупного WAP-портала. Как видно среди браузеров лидирует с большим отрывом Opera Mini (ей надо посвящать целую тему, сейчас рассматривать не будем), а дальше обычные мобильные телефоны с или без ОС. Android и iPhone там нет из-за очень низкого %
Посмотрим на экраны. Хватает первых двух позиций: 240х320, 128х160. Что это нам говорит?
- логотип должен быть до 120 пикселей шириной
- padding и margin должны использоваться в пределах разумного (40 пикселей с левого края, это что-то)
- не большое количество графики (телефон с расширением экрана 128х160 думаете потянет тяжелую страницу?)
Так выглядит шапка сайта:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head><title>Domain.com</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" />
</head>Третью снизу строчку иногда не пишут, а копируют на страницу весь css в тег <style> Почему? Узнал у владельца одного крупного портала, что старенькие Nokia не умеют обращаться с css, как отдельным файлом (но % таких очень мал).
Вторая снизу, как вы поняли, отвечает за иконку сайта. Делается обычная PNG-иконка 16х16 пикселей и переименовывается в favicon.ico
Вы заметили в шапке слово XHTML? Это значит что надо строго следовать правилам разметки этого языка, иначе последствия будут печальными.
Вся информация, что выводится на экран в теге <body>, должна содержаться внутри <div>, иначе получим ошибку валидатора (рекомендую именно этот), конечно. Стоит помнить что лучше не использовать <div id="">, валидатор опять будет ругаться. Следует id заменить на class. Классов может быть несколько, что очень удобно для больших проектов. Почему я заговорил о валидаторе? Если на сайте есть ошибки, то будьте готовы что некий % мобильных телефонов не смогут попасть на сайт
Пример ошибок:
- не закрыт <br />, <hr />, <input /> и т.д.
- тег <img> пишется именно так <img src="" alt="" />
- вся информация, что выводится внутри тега <form>, обязательно должна быть помещена в тег <div>, даже если сам < form> уже находится внутри дива.
<form action="" method="post"> <div> … </div> </form>
Сейчас модно делать сайт «полоской» (200-700px в среднем), можно, но с телефона на экране 128х160 вы этого не увидите. Это делается для красоты, которую оценит только компьютер, но все же давайте посмотрим как правильно делать (встречаются сайты, где дизайн идет полоской и выравнивается по левому краю — убого смотрится):
body { margin: 0 auto; max-width: 600px; }Но лучше придерживаться классического стиля, ведь сайт-то для мобильных устройств, а не компьютеров
Старайтесь не трогать свойства input в css, а если надо — делайте с умом (с параметром type=text, например, а то делают красивое поле ввода, а чекбоксы, радиобаттоны смотрятся ужасно)
О сочетании цветов. Большинство крупных проектов стараются делать дизайн в 2-3 цветах. Много цветов никогда не портят дизайн, если их хорошо скомбинировать. Надо помнить, что на экране мобильного телефона дизайн выглядит не как на компьютере. Иногда очень красиво выглядят дивы, которые плавно меняют цвет (картинка 15-30px высотой), но ключевое слово, как вы уже поняли, «плавно». Очень много браузеров сами “сжимают” картинки (даже фоновые). Представьте как выглядит картинка высотой 20 пикселей с градиентом от #aaa до #222 в таких браузерах. Я вам подскажу – будет несколько линий высотой по пару пикселей. Это очень портит впечатление о дизайне сайта.
В продолжении о цветах и фонах. Очень много «умельцев» делают так:
background: url(img.gif) repeat-x top left #ccc;Сама картинка – это градиент от #ccc до #bbb. Высота дива — 12 пикселей (например, див со ссылками «вход, регистрация, забыли пароль?»), но так он выглядит на компьютере. Какое расширение экрана занимает второе место?
Возможно это очевидно, но очень часто такое встречается.
В следующем топике буду рассматривать реальные дизайны и анализировать их, ведь на практике (примерах) материал намного лучше воспринимается :)
UPD: На счет того, что css вставляют в саму страничку мне написал в ICQ один человек: «CSS внутри страницы вставляют для того, чтобы как можно меньше было новых соединений. Потому что на создание соединения тратится больше времени, чем на отрисовку страницы.»
комментарии (51)