Переключение между мобильной и десктопной версией сайта в адаптивной верстке.

133

-Dima-

27 марта 2015, 09:44

9892

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

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

Поскольку мобильную версию сайта, лично мне, делать было не охота, я некоторое время думал над костылем перехода между мобильной и десктопной версиями сайта в адаптивной верстке.

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

Поэтому набросал свой вариант перехода от адаптивной к десктопной версии сайта, возможно кому-то будет полезно мое решение.

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

в header.php в самом начале файла

<?php

$url = get_permalink();



if ($_POST ["m_template"] == "yes"){

	setcookie('mobile_template', "yes", time() + 60*60*24*30, '/');

	header("Location: $url");

	exit;

}elseif($_POST ["m_template"] == "no"){

	setcookie('mobile_template', "no", time() + 60*60*24*30, '/');

	header("Location: $url");

	exit;

}

?>

в том же файле между тегами <head></head>:


<?php if($_COOKIE['mobile_template'] == "yes" || $_COOKIE['mobile_template'] == "") :?>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">

....

...описываете все свои медиа запросы здесь...

@media (min-width:960px) {...}

@media (min-width:768px) and (max-width:959px){...}

...

</style>

<?php	endif;?>

В файл footer.php(ну или где захочется) вставляем простенькую кнопку/форму/ которая будет переключать мобильную/десктопную верстку.


<form action="<?php the_permalink(); ?>" method="POST">

   <?php if ($_COOKIE['mobile_template'] == "no") : ?>

       <input type="hidden" name="m_template" value="yes" />

       <input type="submit" class="linkbutton" value="Switch to Mobile version" />

   <?php elseif ($_COOKIE['mobile_template'] == "yes" || $_COOKIE['mobile_template'] == "") : ?>

       <input type="hidden" name="m_template" value="no" />

       <input type="submit" class="linkbutton" value="Switch to Desktop version" />

   <?php endif;?>

</form>

Собственно, вот и все. Решение может и не очень изящное, но меня устраивает :)

Если у кого есть вопросы, критика или предложения по улучшению, с радостью отвечу.

3

782

Unlock

27 марта 2015, 14:45

#1

Подозреваю, что такой вариант не устроит Гугл и он будет тупить, что типа сайт на mobile friendly.

Есть желание, - тысяча способов; нет желания, - тысяча поводов! /Петр-I/.

-

133

-Dima-

27 марта 2015, 15:21

#2

Поскольку для ботов, тех кто впервые посетили сайт, или тех кто не переключался на десктопную версию, кука mobile_template отсутствует, то отдается meta viewport и медиа запросы CSS, соответственно все эти пользователи получают адаптивную верстку.

При проверке, Mobile-Friendly Test мне написал

Awesome! This page is mobile-friendly.

Гугл вроде формы не отправляет, поэтому переход оформлял через отправку формой post запроса, чтобы гугл не переходил с адаптивного на десктопный диз и соответственно не тупил :)

_

Хм. Похоже таки пытается отправлять формы c POST-запросами:

http://googlewebmastercentral.blogspot.com/2011/11/get-post-and-safely-surfacing-more-of.html

Ну будем наблюдать как будет реагировать.🍿

PS Как вариант, вместо формы, можно яваскриптом назначать куку и перезагружать страницу..

Цели в метрике и Google запустит mobile-first индексацию Отображение мобильной версии в

1609

SeVlad

27 марта 2015, 17:06

#3

-Dima-:
Многим посетителям (в том числе и мне) при заходе на сайт с телефона/планшета удобнее работать с десктопной версией сайта,

Нормальная вёрстка решает эти проблемы. В см - удобства.

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Связь со мной через http://wp.me/P3YHjQ-3.

782

Unlock

27 марта 2015, 22:10

#4

SeVlad:
Нормальная вёрстка решает эти проблемы.

Расскажите, как так сверстать меню, чтобы оно убого не смотрелось или на смартфоне или на нормальном экране? И это только один элемент, с которым всегда траблы будут.

1609

SeVlad

28 марта 2015, 07:11

#5

Unlock:
Расскажите, как так сверстать меню,

Ещё раз попробую донести мысль: если сайт настолько убого смотрится на девайсе, что есть необходимость перейти на "другую" версию, то нужно СРАЗУ делать так, что бы на девайсе это не смотрелось убого.

782

Unlock

28 марта 2015, 08:16

#6

SeVlad:
Ещё раз попробую донести мысль: если сайт настолько убого смотрится на девайсе, что есть необходимость перейти на "другую" версию, то нужно СРАЗУ делать так, что бы на девайсе это не смотрелось убого.

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

Покажите пример, чтобы знать, что это не бла, бла, бла...

И снова про хостинг. Странные переходы из всех Уведомление о рисках (

437

totamon

28 марта 2015, 10:18

#7

Unlock:
как так сверстать меню, чтобы оно убого не смотрелось или на смартфоне или на нормальном экране?

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

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

это нонсенс, по-моему, и к адаптивной верстке не относится, а скорее к "плохой" верстке 🍿

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

1

Домены и хостинг https://8fn.ru/regru | Дедик от 3000р https://8fn.ru/73 | VPS в Москве https://8fn.ru/72 | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget

Десктоп версия сайта для 19 ноября презентация "большого Тематика Женская атрибутика

782

Unlock

28 марта 2015, 10:33

#8

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

На что обратить внимание, Сайт http:// не оптимизирован Аукцион! Требуется создание элитного

1609

SeVlad

28 марта 2015, 11:14

#9

Unlock:
Поэтому для уже существующих сайтов самый доступный вариант это сделать именно отдельную версию под смартфоны.

А другой движок не надо? А то тут уже был такой - со своим движком для мобильных версий носился. Сдаётся мне, тебе к нему надо. :)

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

Об том и речь - делать нужно изначально ПРАВИЛЬНО, а не криво. И оправдывать кривизну изначально выбранного решения необходимостью создания ещё одного ОТДЕЛЬНОГО решения для другого ЮА - это бред.

Но так как я всегда за юзера, то ничего не имею против того, чтобы дать ему возможность переключения. ;)

Подскажите, плиз: PDA-версия сайта, Не продвигай наших конкурентов! Наполнять или нет?

-

133

-Dima-

28 марта 2015, 15:10

#10

Спасибо Всем за внимание к теме. Вот наверно это тот случай, когда согласен со всеми :)

Безусловно нужно делать все так, чтобы было удобно на всех устройствах. Но даже если вылизан диз и вроде все отлично видно и доступно, у посетителя может быть свое мнение на этот счет ;)

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

Простой пример. Искал себе фотоаппарат, сайт fotos.ua при заходе с планшета отправляет меня на моб. версию(поддомен). Мне она на планшете не удобна, поэтому я ищу кнопку перехода на полную версию, не нахожу ее и пытаюсь в строке удалить поддомен "m." и перейти таким образом. Меня опять отправляет на мобильную версию. Соответственно сайт закрываю... К слову сказать, кнопка перехода есть, но она спрятана в меню которое я заметил только совсем не давно...

Мне, к примеру, проще где-то увеличить, чем перелистывать тонны контента в мобильной версии, а вот жене по моему без разницы :)

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

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

Не буду отрицать, что такое желание у юзера может возникать если моб/адаптивная версия не удачны, то в таком случае данное решение может помочь это заметить, и отследить количество переходов на десктопную версию в адаптивной верстке. Если их будет большой процент, то возможно что-то не так с дизом:)

Собственно поэтому у меня возникло желание при адаптивном дизе иметь на сайте такой переключатель, но не делать ради этого 2 отдельные версии мобильную и десктопную. К тому же, времени у меня это совсем не отняло:)

Сайт http:// не оптимизирован Помогите с адаптивным дизайном А у вас адаптивный

Что делать, чтобы попасть в ответы Google Bard

Дзен реализовал для авторов возможность вывода денег через СПБ