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

[@kabachok]

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

[@isafdar]

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

[@vermilion1]

О выравнивании по центру я ничего не говорил, имелось ввиду выравнивание по умолчанию (по левому краю)
На счет iPhone написал в самом начале

[@Staind]

Отличный пост. Спасибо.

Буду ждать продолжения…

Вопрос тут возник про использование параметра target со значением "_blank". Нужно/не нужно? или это прошлый век?

[@vermilion1]

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

[@fStrange]

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

со старыми Нокиями действительно факт, та же ерунда была с несколькими моделями Сименсов

и есть еще один аспект, который в статье не упомянут
CSS2 может поддерживаться не полностью.
Сталкивался с ситуацией когда не работает наследование .style1 a
для

<div class="style1"><a href="?">ccылка</a>

а вот применение стиля напрямую созданием отдельного класса работает всегда или прописывание через style

<div><a href="?" class="style2">ccылка</a>

поэтому лучше избегать «сложных» правил

[@fStrange]

хм… парсер сожрал закрывающий див

[@vermilion1]

На счет цитаты: я придерживаюсь своего мнения, но версия, которую мне кинули в аську, тоже имеет право на жизнь
На счет наследования вы правы, бывает такое, что оно не работает (но очень редко)

[@fStrange]

поглядел на ваш сайт и вспомнил про еще одно

.auth input.exit:hover {background: #ffd9d9;
	border: 1px solid #e1abab;
	color: #a76666;
}

инпуты, чекбоксы и прочие элементы форм, на старых телефонах очень плохо поддаются стилизации, поскольку нередко отрисовываются не средствами броузера а, средствами ОС

к такому примеру у меня сразу 3 нотиса
1. наследование
2. бордер у инпута
3. использование псевдокласса

[@vermilion1]

Даже не знаю что сказать :)
Сайт делался для компьютеров в первую очередь (маленький магазинчик с оплатой через WM Merchant). Т.е. целевая аудитория — вап-мастера, которые обычно пользуются компьютером. Именно по-этому я не особо переживал как будет выглядеть дизайн на телефоне 2000 года покупки.

[@fStrange]

я понимаю, это было возражение не по существу, просто вспомнилось

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

[@lorien]

Подскажите, как можно под linux протестировать то, как сайт будет отображаться на мобильных устройствах с разрешением 128x160?

[@fStrange]

есть куча эмуляторов
ищите под конкретный телефон

а вообще не так много телефонов с таким разрешением осталось

[@lorien]

Я поискал, прежде чем спрашивать, описываются какие-то извращения с wine т.к. эмуляторы телефонов рассчитаны на винду, хоть и на Java.

[@fStrange]

хм
тогда я пас

поищите конкретно на сайте Нокии, к сожалению ссылку не нашел но у нее были эмуляторы под разные ОС для разработчиков

[@Disturbed]

именно, что были. Сейчас эти эмуляторы уже очень трудно найти (:

[@Disturbed]

Уменьшить окно браузер до такой ширины :)
А в действительности — только на телефоне. Ибо даже эмуляторы (а их можно далеко не всегда найти) не рендерят страницу так же, как реальный девайс.

[@kmeaw]

Поменять настройки window manager, чтобы он фиксировал геометрию окна браузера.

[@lorien]

Боюсь, это как рассуждать о сексе, смотря порнофильмы. Предположения могут оказаться правильными, а могут и нет :)

[@Disturbed]

логотип должен быть до 120 пикселей шириной

а использовать разные логотипы под разные разрешения не судьба? :)
Когда на мобильную версию зайдет кто-нибудь с Nokia 5800 (например), то этот логотип будет выглядеть убого. Что уж говорить про 480px экраны.

[@Rihtor]

А есть ли смысл делать сайты под такие старые телефоны/браузеры? Их владельцы не заходят часто в интернет. А те кто постоянно в сети выбирают соответствующие телефоны.

[@Disturbed]

6300 — не старый телефон

[@fStrange]

посмотрите на статистику в посте

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

[@Rihtor]

Согласен, видимо я несколько поторопился с выводами.

[@t_rex]

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

ИМХО, лучше от подобных фраз избавляться. Далеко не все читатели Хабра профессионалы в телепатии. Если какие-то вещи Вам кажутся очевидными, то для многих это не так. Пишите пояснения plz, это пойдет только на пользу.

[@vermilion1]

Спасибо, исправлю когда карма позволит.

Результат будет такой:

[@isafdar]

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

[@L3n1n]

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

Почему же? Тестировал со стареньких трубок. И чекбоксы и радиобаттоны и поля ввода смотрятся отлично.

[@L3n1n]

Напишите лучше про мини оперу (

[@b0n3Z]

>Вы заметили в шапке слово XHTML? Это значит что надо строго следовать правилам разметки этого языка, иначе последствия будут печальными.

Невалидные сайты неправильно отображаются? Да это же мечта верстальщика! Если бы только еще не было остальных правил нестандартных а-ля «все должно быть в div».
Будем надеяться, что и в десктопных браузерах до этого когда-нибудь дойдут.

[@vermilion1]

Когда был стандарт WML, любая ошибка (даже не закрытый тег
) не позволяла отображать страницу. XHTML все отображает, но ругается валидатор не зря. Есть версии браузеров, которые отреагируют на эту ошибку и страница не откроется.
Я веду к тому, что от этого уже уходят, но еще не ушли и надо это помнить

[@Serator]

xhtml, переданный как «text/html» — не xhtml. Вы передайте его как положено, то бишь как «application/xhtml+xml» и увидите «желтый экран смерти» в Firefox (не знаю, как в других браузерах это обзывается) при незакрытом теге, теге с заглавными буквами и т.п. Большинство нынешних сайтов косят под xhtml, но им не являются, ибо «application/xhtml+xml» ie только с 9-ой версии понимать обучится. Так что выше утверждение скорее ложно, нежели истинно.

[@vermilion1]

Вы правы. Я почему-то упустил одну строчку. Спасибо, исправил

[@mgyk]

CSS внутри страницы пишут для того, что на части телефонов при указание CSS отдельным фаилом происходит сначала загрузка данных страницы, потом телефон тянет css и еще раз перерисовывает страницу. То есть пользователь в течении пары секунд видит страницу без CSS

[@homme]

очень сложно в написании статей такого рода избегать слов «дебилизм» или «какашка»?

[@vermilion1]

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

[@vermilion1]

Исправил

[@Enchanter]

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

1. Моторолы не дружат с жирным шрифтом. Совсем старые моторолки просто закрывали браузер если встречали болд (как тегами, так и css).
2. Одна из моделей нокий не понимала если цвет шрифта задавался как белый или как черный. Настройки для цвета брались из самого браузера, поэтому возникала ситуация что не темном фоне был черный шрифт. Лечится это указанием цвета как #FEFEFE, например.
3. Возникают проблемы если у фоновой картинки задавать положение bottom, некоторые телефоны их радостно игнорируют.
4. Опять же в нокиях странно работает наследование стилей. Работают более или менее стабильно простые правила, например, .div a {}, a {}, или прописывание у элемента конкретного класса. Либо css правила с указанием полного пути, на какое-то наследование более сложное надеяться не стоит
5. Обтекание картинок с любой из сторон с помощью float, работает далеко не везде. Гораздо стабильнее работает align, хоть он и не валиден.
6. Хитрость вроде <br style=«clear:both» /> плохо работает, <div style=«clear:both»> </div> работает гораздо лучше.
7. Штуки вроде   не воспринимаются многим, испльзовать стоит   т.е. цифровые коды или как там их правильно называть

И да про css отдельным файлом правдивы обе версии, некоторые нокии действительно не умеют грузить css отдельным файлом и при не очень хорошей связи css отдельным файлом будет грузиться 3-5 секунд ибо запросы долго идут.

[@Enchanter]

Парсер все-таки съел символы, в седьмом пункте говорилось о nbsp и #160.

[@Stepanow]

Очевидно, Вы имели в виду html-сущности (html-entities)

[@iSlayter]

Особенно круто смотрится в опере мини сайт «пипец» (люблю читать в дороге).
Я даже не представляю КАК надо верстать, чтобы такая бага появлалась!
Суть баги, кстати, в том, что «пипцы» совершенно случайным образом выравниваются по правому краю колонки и занимают в ширину не больше 50 пикселей, т.е. их не прочтёшь. Вообще впервые такое вижу.

[@akalend]

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

[@TreyLav]

Извините, меня одного раздражает замена слова «процент» на символ "%"? Лично я, наткнувшись на символическое обозначение в тексте, начинаю искать рядом с ним число.

[@vermilion1]

История мобильного телефона не началась с iPhone. Историю надо знать :)

[@vermilion1]

Кликабельно

[@vermilion1]

Вы правы, я пропустил одну очень важную строчку (исправил)

[@cbx]

Спасибо! Статья намного более приближена к реальности (чем например вот эта: habrahabr.ru/blogs/mobiledev/107764/) и видно что за ней стоит опыт разработки под реально существующие телефоны и браузеры. Ну и основные грабли хорошо описаны, не только в статье но и в комментариях.

Было бы интересно почитать про специфику Opera Mini.

[@vermilion1]

Спасибо, Оперу рассмотрю тоже, но с ней сложнее т.к. неясно какой алгоритм на стороне сервера оперы (я о версиях до 4.x)