Выбор дизайна в зависимости от типа устройства пользователя.

"Бесшовное" изменение дизайна.

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

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

Со "специальными версиями сайта" тоже не всё так просто - где-то по пути пользователя ждёт редирект, который нехорош с точки зрения SEO. Да и глупо пользоваться редиректами, когда есть возможность прекрасно обходиться без них.

Это и называется "бесшовным" (безредиректным) перемещением пользователя на актуальный для него дизайн.

Выбор дизайна по юзерагенту.

Давайте в файле настроек ./data/settings.php перед массивом $_s['modules'] (он в самом конце файла) организуем массив с идентификаторами дизайна Наны под каждый тип устройства:

   $_s['design']=array(
      
'computer'  => 'rdi',
      
'tablet'    => 'myr',
      
'phone'     => 'myl',
   );

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

Теперь необходим фреймворк, который бы по юзерагенту верно и надёжно определял тип устройства. Вполне можно найти уже готовый, например, Mobile-Detect - из всего этого зоопарка файлов Вам надо взять только содержимое Mobile_Detect.php

Обратите внимание, что Гитхаб выдаёт дефективные файлы - в конце отсутствует закрывающий тег ?> - а он всё-таки нужен. Дополнив файл этим закрывающим тегом PHP, загрузите файл в папку ./data/modules/

Теперь в корневом файле индекса (это движок Наны) отыщите строку с номером в районе 50:

   get_location();

и вставьте перед ней несколько операторов:

   include($_s['loc']['modul'].'/Mobile_Detect.php'); ###
   
   
$detect=new Mobile_Detect;
   
$dev=$detect->isMobile() ? 
      (
$detect->isTablet() ? 'tablet':'phone'):
      
'computer';
   
$_s['des']=$_s['design'][$dev];

Теперь, установив в Гугл Хром какое-нибудь расширение эмуляции юзерагента, например, User-Agent Switcher for Google Chrome, и прикидываясь с его помощью тем или иным устройством (либо заходя на сайт с разных типов устройств), Вы сможете наблюдать хотя бы на примере данного сайта, как его дизайн переключается между разными вариантами. В случае авторского сайта они не имеют никакого отношения к тому или иному типу устройства, а лишь иллюстрируют работу фреймворка.