ITквариат - мобильный дизайн

С момента старта нашего проекта, который, хоть и является больше хобби, чем делом и именно  в этом смысле представляет для нас особый интерес, мы получили немало критических замечаний, которые и взялись устранить своими руками (хобби - есть хобби). В первую очередь это коснулось мобильной версии сайта. 

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

В мобильной версии был виден только календарь статей, немного рекламы и часть блока "популярные статьи". Этого, очевидно, недостаточно.  У пользователя, откуда бы он к нам не пришел, должна быть возможность выбора, что ему смотреть, а тут её совсем не было. 

 

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

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

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

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

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

Полный макет:

Адаптивный модуль макета:

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

Хорошей практикой является создание блоков или модулей под минимальное разрешение, а затем разработка полной их версии. К слову, в предыдущем дизайне нашего сайта это было невозможно - мы сделали его с фиксированными размерами картинок (что хорошо смотрелось на экране) и с невосприимчивыми к изменению таблицами. А вот в новом варианте мы свою проблему решили:

Разумеется, это потребовало совершенно иных, чем ранее, подходов к верстке. Пришлось напрочь отказаться от таблиц и перейти к DIVам (блочным элементам) с их проблемами, связанными с непредсказуемостью работы и необходимостью создания дополнительных классов в таблицах стилей CSS, а зачастую даже с объектно-ориентированным подходом. Но это было интересно  и потому проблем не вызвало. Не остановили нас и слабые, поначалу, знания в области верстки HTML-документов. Сейчас все можно почитать в интернете и мы почитали. 

Будущим веб-мастерам желаю удачи. Все не так сложно, как кажется. Главное - старание и упорство. Запуск нового дизайна - в ближайшие дни... Счастливого всем ноября!

Ссылка на проект

Версия для печатиВерсия для печати
  • 1
  • 2
  • 3
  • 4
  • 5
Всего голосов: 4
Заметили ошибку? Выделите ее мышкой и нажмите Ctrl+Enter!

Читайте также

 

Комментарии

Страницы

Аватар пользователя Dmitry

Запуск нового дизайна - в ближайшие дни

На днях видел, сейчас опять старый. Эдуард, а на локальном сервере типа Денвер сайт не обкатываете?

+1
Аватар пользователя Petro46

А зачем локально, если есть сервер нормальный?

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

Аватар пользователя Dmitry

А зачем локально, если есть сервер нормальный?

Оч. удобно, если много чего допиливать (новый шаблон), я тренировался на кошках Денвере.

+1
Аватар пользователя mike

А я потренировался-потренировался на лампе и бросил -- понял: не моё. :(

-1
Аватар пользователя Petro46

Dmitry пишет:

А зачем локально, если есть сервер нормальный?

Оч. удобно, если много чего допиливать (новый шаблон), я тренировался на кошках Денвере.

Когда-то, лет девять назад и я юзал Денвер, если хостинга не было. А сейчас нет смысла: шаблон допиливать можно и на боевом сайте. У ДЛЕ шаблоны никак не связаны с кодом движка, поэтому, внешний вид сайта можно дорабатывать без риска его сломать. 

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

+1
Аватар пользователя Dmitry

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

Аватар пользователя mental

Воздержусь от комментариев. Уже всё сказал, но меня не слушают. Как хотите.

Аватар пользователя Petro46

mental пишет:

Воздержусь от комментариев. Уже всё сказал, но меня не слушают. Как хотите.

Я все читал, только так и не понял, что требуется от нас?

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

Стоп. Куда тянуть то? (C)

На айфоне у нас есть броузер на весь экран (ВСЕГДА) принимающий два размера в зависимости от положения самого айфона. Либо портретный либо ландшафтный.

Куда и что тянуть то? (C)

Аватар пользователя Petro46

Logicby twitter.com logicby пишет:

 

Куда и что тянуть то? (C)

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

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

Констатирую: ИМХо, как Логик вы слишком слабы. Не получается. Может стоит сбавить обороты и заняться... ну, например, ремонтом в квартире?

 

Страницы