Сообщений в теме: 26

[GiantCherry]

Всем здравствуйте.

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

Подскажите, существуют уже готовые решения для ShopCMS?

[idal]

http://d-sell.net/product_71.html

также можно верстать с помощью @media не знаю как это точно обзывается

[ron]

да, именно через @media под размеры мобильных устройств правится css.
тут ещё конечно от шаблона зависит, ну а если с дефолтного - то думаю верстальщик и сам разберется!

[GiantCherry]

http://d-sell.net/product_71.html

также можно верстать с помощью @media не знаю как это точно обзывается

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

В чем принципиальное отличие от обычной версии скрипта??

да, именно через @media под размеры мобильных устройств правится css.
тут ещё конечно от шаблона зависит, ну а если с дефолтного - то думаю верстальщик и сам разберется!

подскажите пожалуйста что значит @media? где можно почитать?



Про геотаргетинг подскажите что-нибудь??

[idal]

http://w3layouts.com/ шаблоны под разные устройства

[GiantCherry]

http://w3layouts.com/ шаблоны под разные устройства

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

[idal]

Как я его привяжу

тут надо попарится. если не знаете не сделает. Я лично питался, бросил идею на пол пути. очень надо повозится

как в зависимости от устройства шаблоны будут переключаться?

автоматом исходя из размеров экрана

[GiantCherry]

Как я его привяжу

тут надо попарится. если не знаете не сделает. Я лично питался, бросил идею на пол пути. очень надо повозится

как в зависимости от устройства шаблоны будут переключаться?

автоматом исходя из размеров экрана

Почему не получилось и пришлось бросить? В чем загвоздка?

Как сделать так, чтоб автоматом переключались?

Может у кого еще есть какие идеи??? Есть уже готовые решения (исключая мобильную версию предложенную выше)??

[idal]

Есть уже готовые решения (исключая мобильную версию предложенную выше)??

это делается индивидуально под каждый сайт

Включите любой шаблон в демо через планшет либо планшет, и увидите что оно автоматом переключает.
вот кусок цсс под девайсы

/*--end reset--*/
.device{
text-align: center;
margin: 3em auto;
}
.ipad-frame-ver{
width: 768px;
padding: 5em 4.5em;
background: #333;
margin: 0 auto;
-webkit-border-radius: 3em;
-moz-border-radius: 3em;
border-radius: 3em;
padding: 5em;
  text-align: center;
}
.ipad-frame-land{
width: 1024px;
padding: 3em 6em;
background: #333;
margin: 0 auto;
  -webkit-border-radius: 3em;
-moz-border-radius: 3em;
border-radius: 3em;
padding: 5em;
background: #333;
}
.smart-frame-land{
width: 600px;
height: 320px;
padding: 2em 5em 2em 5em;
background: #333;
margin: 0 auto;
-webkit-border-radius: 3em;
-moz-border-radius: 3em;
border-radius: 3em;
}
.smart-frame-var{
width: 320px;
height: 580px;
padding: 5em 3em;
background: #333;
margin: 0 auto;
-webkit-border-radius: 3em;
-moz-border-radius: 3em;
border-radius: 3em;
}
#mobile-frame{
width: 240px;
height: 500px;
padding: 3.5em 1.8em;
background: #333;
margin: 0 auto;
-webkit-border-radius: 3em;
-moz-border-radius: 3em;
border-radius: 3em;
}
.adpack{
left: 25px;
top: 130px;
width:160px;
overflow:auto;
position:fixed;
margin:200px 0 0 20px;
float:left;
z-index: 1;
padding: 7px 0;
}
@media only screen and (max-width:800px) {
.wrap{
  width:95%;
}
.devices{
  padding:5px 0 0 9%;
}
a.closeMe{
  margin:9px 0 0 5px;
}
.closeMe{
  padding-right:18px;
}
}

[GiantCherry]

Есть уже готовые решения (исключая мобильную версию предложенную выше)??

это делается индивидуально под каждый сайт

Включите любой шаблон в демо через планшет либо планшет, и увидите что оно автоматом переключает.
вот кусок цсс под девайсы

/*--end reset--*/
.device{
.....................

Спасибо за ответ.

Что значит включить любой шаблон в демо?? Не очень понятна эта фраза.

Не могли бы Вы привести кусок кода разметки под данную CSS?? На сколько я сейчас понимаю, мне в каждый блок необходимо вставить несколько названий классов

<div class="style1 style2 ... styleN">
   content
</div>

, или нужно делать вот так:

<span class="style1">
  <span class="style2">  
	 <span class="style3">
	................
		  <span class="styleN">
			 content
		  </span>
	.................
	  </span>
   </span>
</span>

И еще вопрос:
С Ваших слов получается, что браузер автоматически передает информацию о разрешении устройства. Я правильно понял?

[GiantCherry]

idal, ответите на вопросы выше?

[idal]

http://w3layouts.com...ve-web-template
сам шаблон

view-source:http://w3layouts.com/brand-logo-flat-ecommerce-bootstrap-responsive-web-template
код

http://w3layouts.com....css?2014-07-17
цсс файл

извините пока нет времени подробно описывать

пробуйте.

[Dbus]

Это называется CSS3 Media Queries, и idal таки прав, нужно брать имеющийся шаблон и переписывать его стили под несколько разрешений экрана,
или в css секциях, или подключая разные файлы стилей в снипетах.
http://frontender.co.../media-queries/
"готовых" универсальных решений имхо быть не может, ну разве что кто-то захочет безвоздмездно подарить уникальный шаблон, в чем я лично сомневаюсь.

[GiantCherry]

Как быть, если у пользователя браузер устарел, и CSS3 не поддерживается???

[Dbus]

Как быть, если у пользователя браузер устарел, и CSS3 не поддерживается???

Это его личные половые проблемы. Старый браузер пусть видит одну версию сайта и делов.

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

[GiantCherry]

Как быть, если у пользователя браузер устарел, и CSS3 не поддерживается???

Это его личные половые проблемы. Старый браузер пусть видит одну версию сайта и делов.

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

Ну как бы это клиент, и он всегда прав.

[idal]

Как быть, если у пользователя браузер устарел, и CSS3 не поддерживается???

это делается для новых гаджетов а не для старых браузеров.

[p4l1ch]

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

[badisoft]

а то уже мозг ломается от этих таблиц в таблицах на таблицах

Если мозг ломается от таблиц, где структура довольно четкая, очевидная (table-tr-td) и почти независящая от CSS, то что же тогда происходит с мозгом при использовании куда менее простых и "читабельных" способов построения сетки шаблона?

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

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

[p4l1ch]

согласен не проще, но гибче получается
раньше когда начинал на таблицах делал, а сейчас как-то поудобней стало на дивах лепить
ну и прописи бутсраповские радуют) прописал классы xs12 md6 и блок готов и для мобил и для настольных)