Нашли ошибку? Сообщите о ней: 1) Выделите ошибку мышкой 2) Нажмите CTRL+Enter  . Подробнее...
Svet Lana аватар

Изменение дизайна сайта под Ipad и Iphone

Forums: 

В основном для просмотра нашего сайта пользуюсь не стационарным компьютером, а Ipad или Iphone. Но Fialki.ru не удобен для этого. Я уверена, что многие сталкиваются с подобным затруднением. 

Просмотр сайта на смарфтоне

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

Поделитесь статьей:


Денис Никитин аватар

«Смартфоны — вперед!»

Светлана, отвечу на Ваш вопрос сначала коротко. В ближайшие месяцы не получится организовать всплывающие надписи на Ipad или Iphone. Все изменения дизайна Fialki.ru заморожены в ожидании грядущего большого изменения дизайна.

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

История вопроса

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

  • смартфоны стали составлять более половины покупок всех телефонов
  • более чем половина заходов на сайты стали делаться со смартфонов и планшетов.

Революция докатилась до столиц наших, вскоре охватит все население наших стран.

Проблема в том, что дизайн сайтов разрабатывался для просмотра на больших экранах мониторов. В частности, из уважения к владельцам нетбуков ширина дизайна нашего сайта поддерживается порядка 1024 пикселя, чтобы можно было смотреть Fialki.ru без горизонтальной полосы прокрутки.

Сайтостроители ответили на изменения средств просмотра широким внедрением дизайна сайтов в стиле "Смартфоны - вперед!":

Википедия

Принцип "Смартфоны - вперед!" («Mobile first»)

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

В соответствии с принципом "Смартфоны - вперед!" дизайн сайта изначально делается в одну колонку исходя из того, чтобы он хорошо смотрелся даже на ширине экрана 240 пикселей. Такой дизайн отличается простотой, отсутствием ненужной информации, отсутствие отдельных колонок с рекламой и т.д. Он очень удобен для посетителей, смотрящих сайты через смартфоны и планшеты, их большинство. А меньшинство с большими мониторами пользуются этим же упрощенным дизайном, но только видят его на весь монитор.

Сейчас является практически стандартом, что все новые сайты делаются сразу под дизайн в стиле "Смартфоны - вперед!".

Адапатация старых сайтов под дизайн "Смартфоны - вперед!"

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

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


План перехода Fialki.ru на дизайн "Смартфоны - вперед!"

Шаг 1. Новая версия программы сайта

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

Ждем-с!

(Если кого-то этот ролик задевает по религиозным или иным мотивам, напишите - я его тут же уберу).

Когда новая версии программы выйдет, я смогу прикинуть объем и стоимость работ по переводу на нее нашего Fialki.ru.

Шаг 2. Перевод Fialki.ru на новую версию программы сайта

В начале января можем попробовать перевести сайт на новую версию программы. 

Старый дизайн рассчитан на старую версию программы и работать с новой версией программы не сможет. Одновременно в начале января 2016 г. поставим новый дизайн в стиле "Смартфоны - вперед!"

Использование дизайна "Смартфоны - вперед!" позволит полноценно использовать Fialki.ru через смартфоны и планшеты:

  • с комфортом читать статьи и обсуждения
  • добавлять фото в свои сообщения
  • появится удобное иерархическое меню под иконкой «гамбургер»:

Удобное меню для смартфонов и планшетов

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

Переход на новую программу сайта и на дизайн "Смартфоны - вперед!" займет первые 1-2 недели января 2016 г.. На это время Fialki.ru большую часть времени будет недоступен для общения.

Шаг 3. Восстановление всех возможностей старого дизайна

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

  • показ всплывающего описания
  • показ количество звезд во всплывающем описании
  • советы Совы
  • уменьшение фотографий в комментариях
  • листание фотографий из комментариев
  • вики-форматирование статей реестра и вики-статей
  • Черновик
  • временные комментарии-примечании
  • реклама статей сайта в левой колонке сайта
  • ...

Эти сервисы - украшательства. Даже при их отсутствии сайт будет нормально работать и на нем можно будет создавать сообщения и знакомится с сайтом. Но без этих сервисов-украшательств будут затруднены работы по управлению сайтом и не будет такого комфорта в его использовании.

Месяц за месяцем нужно будет программировать и восстанавливать в новом дизайне сайта "Смарфтоны - вперед!" дополнительные сервисы, которые сейчас есть в старом дизайне сайта, но уже с расчетом на то, чтобы они хорошо работали и в смартфонах с планшетами. Это может занять 1-2 года.

Как видим, с технической стороны перевести наш Fialki.ru на дизайн "Смартфоны - вперед!" можно. Пусть и полностью переход займет 1-2 года.


Финансирование

Однако нужно понимать, что:

  • вся эта громада работы обойдется примерно в 30-50 тысяч рублей единовременных затрат к январю 2016 г.. Плюс в течение 1-2 лет потребуется еще примерно такая же сумма на доводку нового дизайна до уровня текущих удобств
  • при этом содержимое нашего сайта ни на крупицу.

При этом наш Fialki.ru может годами без всяких дополнительных затрат на переделку продолжать свое существование на старой версии программы сайта и с текущим дизайном, рассчитанным на большие мониторы.

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

Переход же на новую версию сайта и смена дизайна это уже больше относится к статье расходов "перспективное развитие сайта". Самой Алле переход на новую версию сайта и на новый дизайн "Смартфоны - вперед" ничего не дает:

  • как и большинство интернет-профессионалов она предпочитает ходить в Интернет через большой монитор и полноразмерную клавиатуру
  • на Fialki.ru Алла не торгует, никаких денег от Fialki.ru не получает.

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

  • переход на новую версию программы сайта
  • новый дизайн "Смартфоны - вперед!"
  • наращиванию нового дизайна за счет программирования дополнительных сервисов-украшательств.

Если нашему сообществу хочется видеть Fialki.ru удобным для использования на смартфонах и планшетах, то не вижу других источников денег, как ждать пока сообщество соберет нужные 30-50 тысяч рублей для старта работ по переходу на новую программу.

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


План сбора денег на переход к дизайну "Смартфоны - вперед!"

Однако со своей стороны могу помочь организовать сообщество на перспективный переход на новую программу и новый дизайн "Смартфоны - вперед!".

Примерный план из 3 шагов.

Шаг 1. Опрос

Для начала можем провести опрос, чтобы узнать через какие устройства в основном смотрят Fialki.ru наши посетительницы:

  • смартфоны
  • планшеты
  • нетбуки
  • ноутбуки
  • настольные компьютеры
  • телевизоры.

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

Но если пользователей смартфонов и мобильных окажется хотя бы 20-30%, то это будет означать что смартфонно-планшетная революция дошла и до наших стран и сообществу Fialki.ru нужно настраиваться на сбор денег для перехода на дизайн "Смартфоны - вперед".

Шаг 2. Живое знакомство с дизайном "Смартфоны - вперед!"

Для начала переключу сайт на 2-3 дня в дизайн "Смартфоны - вперед", разработанный для текущей старой версии программы сайта.  (Такое временное переключение можно сделать бесплатно).

На это время перестанут работать все сервисы-украшательства, но зато сообщество своими глазами сможет увидеть, в чем заключается разница в просмотре Fialki.ru на текущем дизайне для больших мониторов и перспективном дизайне "Смартфоны - вперед!".

Шаг 3. Обсуждение по сбору денег

Если сообществу понравится идеи дизайна "Смартфоны - вперед!", то тогда можно будет отдельно предметно обсудить, как нам лучше начать собирать 30-50 тысяч рублей для старта в новогодние праздники перехода на новую программу сайта и на новый дизайн "Смартфоны - вперед!".

Но детализировать этот шаг наверное имеет смысл только после того, если будут успешно пройдены два предыдущих шага плана сбора денег.


Обсуждение

Наше сообщество Fialki.ru довольно консервативно как интернет-пользователи:

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

Хотелось бы в комментариях услышать мнение нашего сообщества. 

Денис Никитин аватар

А это, Светлана, мы сейчас узнаем

Svet Lana, Вы пишете:
"Очень вдохновляет, что у Вас грандиозные планы по модернизации, усовершенствованию сайта  АплодисментыДаЦветочек"

Согласен с Вами. План это половина дела. Если уж за рубежом несколько лет назад народ в большинстве перешел на просмотр сайтов через мобильные устройства и планшеты, то к нам это тоже рано или поздно придет. Нужно к этому понемногу готовится:

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

Выбор момента перехода

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

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

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

2. Но если перейдем слишком поздно, то к тому времени растеряем технически продвинутую часть сообщества, которая за это время уйдет на другие небольшие фиалковые сайты, которые своевременно позаботились о дизайне для смартфонов и планшетов. Через 5 лет в фиалковом Интернет выживут только сообщества, которые сменили дизайн на "Смартфоны - вперед!", остальные будут прозябать.

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

Влияние технологий

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

В 2010-х годах фиалковые сообщества перешли в основном на сайты, где можно вести свои блоги с выводом на главную. 

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

В Интернет технологии имеют большое значение. Поэтому мы на Fialki.ru стараемся держать "нос по ветру". Иначе без обновления технической стороны сайта уже через 5 лет наше сообщество разбредется по более удобным для общения новым фиалковым сайтам.

Прогноз

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

В России уже более половины продаж мобильных телефонов приходится на смартфоны, а не на телефоны с небольшим экраном. По мере смены парка старых мобильных телефонов на смартфоны и снижения тарифов на мобильный интернет большая часть фиалочниц будет заходить на сайты:

  • в первую очередь через смартфоны
  • во вторую - через планшеты
  • в последнюю - через большие мониторы нетбуков, ноутбуков, компьютеров, интернет-телевизоров.

Svet Lana, Вы пишете:
"Только не такие уж мы и консервативные, женщины после 36. ТайнаСмех"

А это, Светлана, мы сейчас узнаем.

"Голосование о консерватизме женщин Fialki.ruЦветочек

Денис Никитин аватар

Svet Lana, Вы оказались правы

Svet Lana, Вы пишете:
"Только не такие уж мы и консервативные, женщины после 36 ТайнаСмех."

Svet Lana, Вы оказались правы. По результатам опроса уже сегодня 36% наших посетительниц предпочитают посещать Fialki.ru с помощью смарфтонов и планшетов (в равной пропорции). И как это у меня язык повернулся говорить о консервативности наших фиалочниц, не понимаю. Неприятность

Тогда получается, что нужно переезжать на новую версию сайта и новый дизайн в январе 2016 г. Или, крайний срок, в январе 2017 г. А если позже, то к тому времени наше сообщество уже разбежится с Fialki.ru:

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

До января 2016 г. осталось 7 месяцев. Не уверен, что наше сообщество сможет целенаправленно каждый месяц собирать по 5 тысяч рублей на переход на мобильную версию сайта. 

Попробую проработать более бюджетные варианты перехода на мобильный дизайн.

Svet Lana, большое спасибо за интересную тему!