itkvariat

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




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


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


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

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


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


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


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



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


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


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


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


    Эдуард ТРОШИН





    Подписывайтесь и читайте новости от ITквариат раньше остальных в нашем Telegram-канале !



    Заметили ошибку? Выделите ее мышкой и нажмите Ctrl+Enter!  




    И еще об интересном...
  • LG G6: большой тест - обзор
  • AppleTV: консоль, медиапроигрыватель или…
  • ITkvariat.com — завершаем разработку сайта+бонус: советы начинающим веб-разработчикам
  • Бюджетный и производительный. Компактный NAS-сервер Thecus N2810
  • Java — великий и могучий
  • Репортажная зеркальная цифровая фотокамера Nikon D500. Новый флагман для искушенных.
  • «Сапожник без сапог». SSD-накопитель Intel SSD 540s


  • А что вы думаете? Напишите в комментариях!
    Кликните на изображение чтобы обновить код, если он неразборчив



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

    Полная версия правил

Самое популярное
    
Проверьте скорость вашего интернета!


Что бывало...
Наши друзья
Сервисный центр Five Service

Магазин кабелей и аксессуаров UGREEN

Самоклейкин

Смарт



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




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


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


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

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


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


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


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



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


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


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


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


Эдуард ТРОШИН





Подписывайтесь и читайте новости от ITквариат раньше остальных в нашем Telegram-канале !



Заметили ошибку? Выделите ее мышкой и нажмите Ctrl+Enter!  




И еще об интересном...
  • LG G6: большой тест - обзор
  • AppleTV: консоль, медиапроигрыватель или…
  • ITkvariat.com — завершаем разработку сайта+бонус: советы начинающим веб-разработчикам
  • Бюджетный и производительный. Компактный NAS-сервер Thecus N2810
  • Java — великий и могучий
  • Репортажная зеркальная цифровая фотокамера Nikon D500. Новый флагман для искушенных.
  • «Сапожник без сапог». SSD-накопитель Intel SSD 540s


  • А что вы думаете? Напишите в комментариях!
    Кликните на изображение чтобы обновить код, если он неразборчив



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

    Полная версия правил
    ITквариат (АйТиквариат) Powered by © 1996-2024