Форум - Адаптивный дизайн для мобильных телефонов | WizardFox Forum

Добро пожаловать в сообщество WizardFox!

Хотите присоединиться к нашим пользователям? Нет ничего проще! Не стесняйтесь, зарегистрируйтесь прямо сейчас

Скрыть объявление

На форуме работает круглосуточное online радио. Огромный выбор радиостанций. Удобная навигация.

Форум Адаптивный дизайн для мобильных телефонов

Тема в разделе "Инструкции по форуму", создана пользователем Alex, 18 июл 2013.

  1. Alex

    Alex ......
    Администратор

    Регистр...:
    14 июл 2007
    Сообщения:
    30
    Симпатии:
    318
    Как уже и предполагалось ранее, для лучшей поддержки устройств с маленькими экранами, таких как мобильные телефоны и планшеты, добавлен стиль с адаптивным дизайном.

    Responsive-wiz.jpg

    Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное восприятие на различных устройствах, подключённых к интернету.

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

    Впервые понятие отзывчивого веб-дизайна (англ. responsive web-design) ввел Итан Маркотт в одной из своих статей в мае 2010 года. Впоследствии он выпустил книгу под названием «Responsive Web Design», посвященную данной технологии.

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

    С другой стороны, Аарон Густафсон выпустил книгу «Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement», которая рассматривает метод «постепенного улучшения» англ. progressive enhancement (ненавязчивый JavaScript) как важную составляющую адаптивного дизайна.

    В результате среди веб-дизайнеров стали понимать адаптивный дизайн (англ. adaptive design, не путать с англ. adaptive layout) как более широкое понятие, включающее отзывчивый дизайн (в качестве одной из реализаций адаптивности) и постепенное улучшение.

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

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

    Чтобы понять, как это выглядит, просто попробуйте уменьшить размер экрана вашего браузера (внимание: это не сработает, если вы пользуетесь старой версией Internet Explorer). Ну что, нравится? Именно так увидит эту статью пользователь iPhone или другого сотового телефона.


    Что такое адаптивная верстка (или адаптивный веб-дизайн)? Если попытаться объяснить совсем просто, то в стилях указывается CSS, который применяется только тогда, когда ширина экрана меньше определенного значения. Это позволяет меняться дизайну и подстраиваться содержимому под различные разрешения. Например, табличный или горизонтально ориентированный дизайн будет не очень хорошо смотреться на экране, который имеет ширину всего 320 пикселей.

    • Узкий (максимальная ширина: 480px): телефоны вертикальной ориентации, некоторые телефоны горизонтальной ориентации
    • Средний (максимальная ширина: 600px): некоторые телефоны горизонтальной ориентации, 7-дюймовые планшеты вертикальной ориентации
    • Широкий (максимальная ширина: 800px): 7-дюймовые планшеты горизонтальной ориентации, 7-дюймовые планшеты вертикальной ориентации

    Портал - Адаптивный дизайн

    Наш портал тоже уже переделан и имеет адаптивный дизайн.

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

    iPhone6 - Front Black - by JustD.png

    А вот так портал выглядит в альбомной ориентации и на "7" планшетов в книжной ориентации. Опять же не видно боковой панели, боковая панель находится снизу.


    iPhone-4S-W&B-landscape-mockup.png


    В вертикальном положении смартфона на экране выводится другое лого.

    Вы сможете просто листать страницы.


    А на планшете у вас уже будет сбоку отображаться боковая панель.

    tablet-mockup111.png
     
    #1 Alex, 18 июл 2013
    Последнее редактирование: 23 май 2016
    Iuk64, gandjubas, aliska и ещё 1-му нравится это.
  2. Alex

    Alex ......
    Администратор

    Регистр...:
    14 июл 2007
    Сообщения:
    30
    Симпатии:
    318
    Форум - Адаптивный дизайн

    Responsive-wizard-post.jpg

    Немного пришлось изменить лого для мобильных телефонов, а также сместить его вниз, так как кнопка "Регистрация и вход" и лого не помещались на некоторых телефонах. Но выглядит это очень даже не плохо.

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

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

    iphone-flat-template-forum2.png

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

    iPhone-4S-W&B-landscape-mockupforum.png
     
    #2 Alex, 18 июл 2013
    Последнее редактирование: 19 авг 2013
    Iuk64, Alv, gandjubas и 2 другим нравится это.
  3. Alex

    Alex ......
    Администратор

    Регистр...:
    14 июл 2007
    Сообщения:
    30
    Симпатии:
    318
    Также был переделан стиль и в файловом архиве. Теперь вы сможете скачать файл даже на мобильный телефон.

    Стиль сделан так, чтобы отображались все кнопки, но не налезали друг на друга. Поэтому они сделаны по вертикали, а не по горизонтали.

    Для того, чтобы можно было легко скачать файл, кнопка "Скачать" сделана побольше.
     
    Iuk64, Ben54 и aliska нравится это.
  4. Alex

    Alex ......
    Администратор

    Регистр...:
    14 июл 2007
    Сообщения:
    30
    Симпатии:
    318
    Новый стиль подготовлен к адаптивному дизайну.

    iPhone-6-5,5-inch-Three-colors-Mockup.png

    Добавлена выдвижная боковая панель навигации.
     
    #4 Alex, 10 фев 2016
    Последнее редактирование: 10 фев 2016
    Iuk64 нравится это.