Разработка шаблона для мобильных устройств

Шаблоны для LiveStreet
Давно я хотел это сделать, да всё как-то не до того было...

Итак, я решил сделать шаблон для мобильников. Дизайн по мотивам «родного» дизайна сайта движка.

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

  1. Нужен ли такой шаблон вообще?
  2. Что должна содержать мобильная версия сайта
  3. Необходимо протестировать то что сейчас есть различными устройствами

Моё мнение таково (по дефолту, содержимое будет меняться в зависимости от ваших комментариев):

  1. Нужен :)
  2. На главной заголовок топика и немного информации о нем. По ссылке переходим на полную новость с возможность комментировать. Соответственно есть вход для юзеров (думаю, как на m.yandex.ru/). Юзер может комментировать, писать пост, производить настройки. Можно просматривать топики, список блогов, список людей. На конентных страницах есть поиск. Где нужно — есть постраничная навигация. Предлагайте...
  3. Протестировал на своем Nokia E50 (Opera Mini) — вполне нормально отображается
Верстал с ориентацией дисплея от 320px, т.к. меньше уже совсем неудобно, не думаю, что кто-то станет читать и писать с меньшим экраном. Возможно есть ошибки в верстке, на всё ушло около 4х часов (в субботу иду в Яндекс на Субботник, посвященный разработке под мобильники, надеюсь вынести что-нибудь полезное)

Если найдутся желающие написать хак для движка, который будет проверять юзер-агета и выдавать соответствующий шаблон — будет шикарно, я это не осилю. Например, у wordpress есть плагин, который делает такую работу (Wordpress PDA & iPhone), установлен в моем блоге techmeat.net, можете зайти с мобильника и увидите pda-версию. У Joomla! так же есть похожий плагин, вот описание того, как это работает на джумле, вот сам плагин.

Посмотреть вживую и протестировать макет можно здесь: m.l03.ru.

UPD: Выложил PSD на народе, вдуг у кого-либо появится желание поваять.

Архив файлов от 28.03.2010 21.59

73 комментария

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

1. однозначно нужен


2. опционально в конфиге при входе l03.ru/ls/ имхо интереснее чтобы не показывался контент а была форма логина (но это при условии что функционал мобильной версии будет такой как вы описали, комментарии т.д.), это быстрее приучит пользователей общаться на сайте через мобильный, а не только читать его, и время проведенное пользователем на сайте сидя в маршрутке резко возрастет имхо :)

Ещё моё имхо, что мобильная версия должна содержать максимум информации в удобном виде, при минимуме текста. Убрать лишние данные о топике eXtravert, 20 марта 2010, 23:22; комментариев: 17, это можно сократить до eXtravert, 20 марта, 17 (к примеру у меня на нокии 6700+опера мини предложенный dfvb вариант дополнительнйо информации о топике вариант уместился в две строчки, зачем спрашивается?).

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

3. Nokia 6700+ opera mini = Меню «Настройки», стрелочка навигации по страницам вылезли за экран. Дополнительная информация о топике (имя пользователя, дата, время и кол-во комментариев) уместилась в две строчки.

Вот всё что на данный момент взбрело в голову :) Буду ждать продолжение истории с мобильной версией шаблона для лайвстрита :)
  • pin
  • +1
  • ↓
avatar
Не соглашусь с первой частью комментария. Не нужно пользователя приучать к интерфейсу, нужно просто сделать этот интерфейс удобным, чтобы пользователь сам смог быстро сориентироваться что и где нажать. Форма авторизации — это барьер, которым можно отпугнуть посетителя, давайте позволим ему решать — авторизовываться или нет :)

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

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

Nokia 6700 — телефон с достаточно маленьким экраном. НО. У Opera mini умеет поворачивать экран на 90 градусов, и вот у нас экран с шириной 320px. Я на своем Nokia E50 так и вхожу в сеть (проскакивают мысли сменить аппарат, но слишком уж я люблю свою нокию).
avatar
Nokia 6700 к сатти со стандартным а не маленьким экраном :)
avatar
240x320, где 240 — это ширина, маловато будет для более-менее удобной работы в сети. Я потому свой телефон на бок и переворачиваю, с шириной в 380 гораздо удобнее.
avatar
Ой, 320 конечно же, откуда я взял 380 )))
avatar
Шаблон будет очень полезен!
Я лично видел его как аналог m.habrahabr.ru с возможностью комментирования и написания постов.
avatar
Мобильный хабр сделан для телефонов, чисто для ознакомления с новыми матеиалами. Такой шаблон для LS может сделать каждый, кому как нравится.
Моя же идея заключается в шаблоне для смартфонов, с пальцеориентированным интерфейсом (без ущерба для аппаратов, которые его не имеют). Функционал в таком шаблоне должен быть не на много меньше, чем в «комповом» шаблоне.
avatar
молодец, только нужно сделать поддержку с отключенными картинками, сейчас поиск и стрелки переключения страниц не видны.
avatar
Поправил, спасибо.
avatar
тема уже поднималась
никто не поддержал
avatar
Мной она тоже уже поднималась, однако дальше слов дело не пошло. Сейчас я хочу довести эту тему до конца. Если большенство скажет, что такой шаблон не нужен — я навязывать не стану.
avatar
нежен, нужен, нужен :)
avatar
Пару скринов с айфона

Строка поиска


page nav — циферки сползли
  • pix
  • +2
  • ↓
avatar 
<link rel="apple-touch-icon" href="http://img.yandex.net/i/touch/ya.png" />

avatar
Ух, забыл яндксовский значек сменить )) Поправил.
avatar
ну и повернув его

avatar
Было максимально 320, теперь 640.
avatar
Может не нужно фиксировать? 
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
avatar
Ага, заменил, спасибо!
avatar
Строка поиска странно себя повела, буду разбираться. Кнопочки постничной навигации на компе так же отображаются, на нокии нормально, буду решать эту проблему.

Большое спасибо за скриншоты!!!
avatar
На Android'e только один косяк с навигацией аналогично айфону
avatar
Попрошу автора выложить шаблон и те самые модули для WP и joo, я посмотрю, что можно сделать :)
avatar
Плагин для Wordpress (правда судя по дате файлов — годовалой свежеси).
Вот описание того, как это работает на джумле, вот сам плагин.

Шаблона для LS пока нет, постараюсь сверстать рабочую версию в течении следующей недели. Работы на самом деле на пару дней, но на тесты уйдет уйма времени.
avatar
Тестировать можно коллективом, этим сократим время.
Сейчас посмотрю плагины, по идее годовалость не важна, главное уловить принцип работы плагина.
avatar
Реализовано довольно просто, проблем с плагином не будет, правда я не умею писать плагины для LS, можно просто дописать функционал в самом движке.
avatar
Скорее всего нужно будет писать хак, ведь не каждому сайту нужна мобильная версия.
avatar
Я прошлым летом делал нечто подобное, никаких хаков писать не нужно. Ставим в поддомен отдельную копию движка (например, m.site.ru) со своими настройками и снабжаете его облегчённым шаблоном. Всё.
avatar
Я так делал на джумле. Но может быть посмотрим в сторону наших коллег из яндекса и гугла, там всё же умные люди работают :)
avatar
Если честно, я понял сути предложения посмотреть в сторону поисковиков. Поясни для тех, кто в танке, пожалуйста.
avatar
не понял то есть
avatar
Попробуй с мобильника зайди на yandex.ru или google.com — ты загрузишь страничку именно для мобильника, а не полновесную страницу, как на компе. Это есть забота о пользователе, они на заставляют посетителя искать ссылочку на pda-версию сайта, а сами определяют мобильное устройство и посовывают «мобильный» сайт.
avatar
Теперь понял. Не знаю, насколько это будет оптимальным с учётом нововведений в ЛС 0.4, но можно попробовать сделать один шаблон «двуликим». В зависимости от user-agent показываем либо полновесную версию, либо упрощённую.

Этот php-код поможет вам не тратить время на изобретение велосипеда, определяющего мобильные устройства.
avatar
Во, очень полезная ссылочка!!! Спасибо :)
avatar
Я уже проходил этим путём в прошлом году :)
Планировал сделать мобильный шаблон для 0.4 в свободное время на майских праздниках. А тут вы с опережающей инициативой, так что я в меру возможностей буду принимать участие советами или ещё как-то. Вместе гораздо проще такие вещи делать, особенно в части тестирования.
avatar
С радостью приму помощь! :)
avatar
Кстати, сейчас попробовал зайти на яндекс — он не показывает на основном домене мобильную версию, а редиректит на субдомен.
avatar
Да, Яша редиректит на поддомен, google.ru остается на основном домене. Вот перед нами 2 подхода к решению одной задачи :)
Но как вы ниже заметили — для разработчиков будет удобнее, если движок лежит на одном домене (опытному разработчику поддомен не станет преградой). Например, я не знаю что делать с загружаемыми пользователем картинками при 2х доменах.
avatar
Я имел ввиду не разработчиков, а широкие массы, которые два-три раза в неделю пишут здесь топики «Проблема при установке ЛС», в которых раз за разом обсуждается одно и то же. Для них само создание субдомена может стать проблемой, ведь обычно такие люди тестируют ЛС локально или приобретают самые дешёвые тарифы, которые частенько не предоставляют возможности создания субдоменов.

Что касается картинок, то нет никакой проблемы — в базе записывается абсолютный путь. Если двойное хранилище не устраивает — можно сделать символическую ссылку и объединить их. Я в этом плане недостаточно осведомлён, но мне неизвестны браузеры, позволяющие загружать картинки так, как это реализовано в редакторе постов и комментариев.
Сейчас проверил в сафари — там кнопка «обзор» попросу неактивна. Существуют ли мобильные браузеры, которые позволяют загружать локальные файлы в интернет?
avatar
Я оперой в мобильные одноклассники однажды загрузил ))
avatar
Гугл, насколько я понимаю, использует перезапись урлов для моблильных браузеров, подставляя вместо главной содержимое вот этой страницы google.com/m
avatar
Лучше сделать редирект на поддомен, если пользователь зашел с мобильного браузера.
avatar
Конечно можно, но в любом случае неоюходимо определять юзер-агента
avatar
Разумеется, так и было сделано:
RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sony|symbian|nokia|samsung|mobile|windows ce|epoc|opera" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "mini|nitro|j2me|midp-|cldc-|netfront|mot|up\.browser|up\.link|audiovox"[NC,OR]
RewriteCond %{HTTP_USER_AGENT} "blackberry|ericsson,|panasonic|philips|sanyo|sharp|sie-"[NC,OR]
RewriteCond %{HTTP_USER_AGENT} "portalmmm|blazer|avantgo|danger|palm|series60|palmsource|pocketpc"[NC,OR]
RewriteCond %{HTTP_USER_AGENT} "smartphone|rover|ipaq|au-mic,|alcatel|ericy|vodafone\/|wap1\.|wap2\.|iPhone|android"[NC]

RewriteRule ...перенаправляем на субдомен для мобильных устройств
avatar
Сенкс! Сейчас испробуем :)
теперь ждем новостей от автора, я могу взяться за адаптацию шаблона под LS.
avatar
Сегодня будут несколько подшаблонов. Основная головная боль — как представить комментарии, дерево будет не очень юзабельно, сплошной список тоже никуда не годится… Может есть идеи или примеры встречались?
avatar
Я думаю, что вы начинаете разработку не с той стороны. Для начала нужно определить, какие конкретно платформы и браузеры будут поддерживаться. А от этого уже плясать и с аяксом и с экранным разрешением и прочими возможными ограничениями.
avatar
Боюсь, что JS не нужно трогать вообще, а то потонем в тестах и корректировках. А касаемо отображения — вебкиты покажут нормально, миниопера чуть похуже, но тоже вполне достойно. Симбиан (по крайней мере на моём аппарате) откровенно тупит — ничего не поделать.
avatar
На мой взгляд, держать два движка с разными настройками и шаблонами гораздо проще, чем разрабатывать универсальный шаблон и думать над тем, как сделать для мобильников количество постов в списке меньше, чем предусмотрено в конфиге.
avatar
Универсальный шаблон — большой гемор, полностью согласен. Но ведь мы в конфиге LS указываем, какой шаблон подключать, таким же образом может просто подключаться PDA-шаблон. Остается решить какой способ лучше — подключение шаблонов или редирект на поддомен.
avatar
Согласен, я сейчас как-то подзабыл о такой возможности, а тогда у меня было условие полного невмешательства в код движка. Если определять средствами php, то лучше подменять шаблон.

Это решение будет подходить самой широкой аудитории, ведь не у всех есть возможность выделять отдельный субдомен для мобильной версии. Те, у кого такая возможность имется смогут без особого труда адаптировать готовое решение и для варианта с редиректом.
avatar
Архивчик на то, что есть сейчас, на мобильной страничке так же почти все ссылки стали рабочими. Пока не успел всё доделать, но за пару дней должен управиться.
avatar
На первый взгляд всё свёрстано нормально.
avatar 
RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sony|symbian|nokia|samsung|mobile|windows ce|epoc|opera" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "mini|nitro|j2me|midp-|cldc-|netfront|mot|up\.browser|up\.link|audiovox"[NC,OR]
RewriteCond %{HTTP_USER_AGENT} "blackberry|ericsson,|panasonic|philips|sanyo|sharp|sie-"[NC,OR]
RewriteCond %{HTTP_USER_AGENT} "portalmmm|blazer|avantgo|danger|palm|series60|palmsource|pocketpc"[NC,OR]
RewriteCond %{HTTP_USER_AGENT} "smartphone|rover|ipaq|au-mic,|alcatel|ericy|vodafone\/|wap1\.|wap2\.|iPhone|android"[NC]
RewriteRule ^/(.*)$ http://m.%1/$1

Такая конструкция верна? Для реврайта из site.ru в m.site.ru
avatar
так ты будешь перебрасывать все моб устройства. А если кто-нибудь захочет посмотреть полную версию сайта, этого не получиться
avatar
И как же в этом случае поступить?
avatar
непонятно, почему ширина зафиксированна.
ведь это пораждает неиспользованное пространство при развороте экрана или проблемы с использыванием на устройствах с шириной отличной от прописанного в шине.
ширина должна быть 100% (см. как пример pda.lenta.ru).
avatar
Пока что я решил не делать больше 640px, т.к. неудобно верстать. Потом всё поправится одной записью в css )))
avatar


Обращаю внимание, что ссылки на страницы (слева и справа) не выровнены по вертикали.
avatar
Надо вообще отказаться от картинок в постраничке, только гемороя добавляют.
avatar
в случае с лс лично я вообще не вижу необходимости использовать изображения нигде, кроме, пожалуй, редактора постов/комментариев
avatar
Однозначно нужная фича!
А как сейчас с этим дела обстоят?
Когда можно будет увидеть рабочий шаблон?
avatar
Обсуждение было перенесено в закрытый блог разработчиком шаблонов. Сроков пока нет, сейчас формируется команда тестеров и желающих поучаствовать в разработке. Вёрстку делает TecHMeaT.
avatar
А как можно присоедениться к тестерам?
avatar
отправил приглашение
avatar
На 0.4 взлетит? Присоединюсь
avatar
Для начала будет сделано для текущей стабильной версии. Доработать до 04 не составит большого труда.
avatar
Присоединюсь с радостью.
avatar
Отправил приглашение prepodina и elsinor. Если кто ещё желает поучаствовать, пишите в инбокс, чтобы не захламлять текущий топик.
avatar
Хотелось бы поучаствовать. Можно приглашение?
avatar
m.l03.ru/login/
выдает ошибки
avatar
Почему бы подобное не сделать для последней версии LS?
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.