Статья Дизайн сайта для мобильных устройств

Администратор · Регистрация: 27.02.2009

Речь пойдет о мобильных устройствах, которые на данное время занимают большой % на рынке WAP’a (телефоны без ОС, Symbian и прочие), об Android и iPhone сегодня говорить не будем

Давайте посмотрим на модели телефонов и разрешения экранов посетителей одного крупного WAP-портала. Как видно среди браузеров лидирует с большим отрывом Opera Mini (ей надо посвящать целую тему, сейчас рассматривать не будем), а дальше обычные мобильные телефоны с или без ОС. Android и iPhone там нет из-за очень низкого %

Посмотрим на экраны. Хватает первых двух позиций: 240х320, 128х160. Что это нам говорит?

логотип должен быть до 120 пикселей шириной
padding и margin должны использоваться в пределах разумного (40 пикселей с левого края, это верх дебилизма)
не большое количество графики (телефон с расширением экрана 128х160 думаете потянет тяжелую страницу?)

Так выглядит шапка сайта:

PHP код:

<?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> <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> уже находится внутри дива.

PHP код:

<form action="" method="post"> <div> … </div> </form>

Остальные вам покажет валидатор

Сейчас модно делать сайт «полоской» (200-700px в среднем), можно, но с телефона на кране 128х160 вы этого не увидите, а на большом экране будет какашка (если дизайн 200px, а экран 320px шириной). Это делается для красоты, которую оценит только компьютер, но все же давайте посмотрим как правильно делать (встречаются сайты, где дизайн идет полоской и выравнивается по левому краю — убого смотрится):

PHP код:

body { margin: 0 auto; max-width: 600px; }

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

Старайтесь не трогать свойства input в css, а если надо — делайте с умом (с параметром type=text, например, а то делают красивое поле ввода, а чекбоксы, радиобаттоны смотрятся ужасно)

О сочетании цветов. Большинство крупных проектов стараются делать дизайн в 2-3 цветах. Много цветов никогда не портят дизайн, если их хорошо скомбинировать. Надо помнить, что на экране мобильного телефона дизайн выглядит не как на компьютере. Иногда очень красиво выглядят дивы, которые плавно меняют цвет (картинка 15-30px высотой), но ключевое слово, как вы уже поняли, «плавно». Очень много браузеров сами “сжимают” картинки (даже фоновые). Представьте как выглядит картинка высотой 20 пикселей с градиентом от #aaa до #222 в таких браузерах. Я вам подскажу – будет несколько линий высотой по пару пикселей. Это очень портит впечатление о дизайне сайта.

В продолжении о цветах и фонах. Очень много «умельцев» делают так:

PHP код:

background: url(img.gif) repeat-x top left #ccc;

Сама картинка – это градиент от #ccc до #bbb. Высота дива — 12 пикселей (например, див со ссылками «вход, регистрация, забыли пароль?»), но так он выглядит на компьютере. Какое расширение экрана занимает второе место? Думаю вы уже поняли, как это будет отображаться. Возможно это очевидно, но очень много такое встречается.

UPD: На счет того, что css вставляют в саму страничку мне написал в ICQ один человек: «CSS внутри страницы вставляют для того, чтобы как можно меньше было новых соединений. Потому что на создание соединения тратится больше времени, чем на отрисовку страницы.»

Источник

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид