АРМАДА
Тонкости создания адаптивных сайтов.
На страницу 1, 2  След.
Новая тема Написать ответ Advanced Hosters - профессиональный хостинг

jusava1982 + +
Опытный
Зарегистрирован: 20.12.2012
Сообщений: 162
Обратиться по нику
# Добавлено:Пн Сен 14, 2015 12:31 pmДобавить в избранноеОтветить с цитатой
Здравствуйте уважаемые форумчане. Возможно ли создать адаптивный сайт таким образом чтобы его адаптивный вариант (с расширением ширины экрана 800 и меньше)немножко отличался по дизайну и наполнению от неадаптивного варианта (с ширины экрана больше 800) одного и того же сайта ?

veligursky +
Гуру
Зарегистрирован: 14.07.2008
Сообщений: 1127
Обратиться по нику
# Добавлено:Пн Сен 14, 2015 1:47 pmОтветить с цитатой
медиа квери в помощь
Блог для Новичков в SEO и CPA, CPA Admitad

Miss Content
V.I.P.
Зарегистрирован: 05.03.2010
Сообщений: 7881
Обратиться по нику
# Добавлено:Пн Сен 14, 2015 2:13 pmОтветить с цитатой
Вот статья по дизайну мобильных сайтов, если будет время, переведу ее на этой неделе.
Место для Вашей рекламы!

Iceberg
V.I.P.
Зарегистрирован: 17.03.2010
Сообщений: 12044
Обратиться по нику
# Добавлено:Вт Сен 15, 2015 2:58 pmОтветить с цитатой
Часто мобильная версия настолько отличается от обычной, что на знакомом сайте ничего не найти.


DrKronos
SEO-доктор
Зарегистрирован: 11.03.2008
Сообщений: 13024
Moder (Сумма: 1)
Обратиться по нику
# Добавлено:Вт Сен 15, 2015 4:51 pmОтветить с цитатой
Да, Media-запросы. При помощи этих правил можно настраивать отображение различных элементов в зависимости от параметров экрана и т.п
Oscar the grouch Здесь могла быть ваша реклама

Yabuti
V.I.P.
Зарегистрирован: 28.11.2008
Сообщений: 16263
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Вт Сен 15, 2015 4:53 pmОтветить с цитатой
Можно, так часто и создают мобильный шаблон гораздо проще, чем дестопный.
Но, ИМХО, от этого могут сильно ухудшаться ПФ, поэтому выбираю шаблоны с мобильной версией, похожей на основной шаблон. То есть, резиновая верстка, относительные размеры изображений и слоев, а вместо меню - кнопка меню, т.к. места на экране мобильного девайса не очень много, нужного его использовать с максимальной эффективностью.
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
--

DrKronos
SEO-доктор
Зарегистрирован: 11.03.2008
Сообщений: 13024
Moder (Сумма: 1)
Обратиться по нику
# Добавлено:Вт Сен 15, 2015 5:10 pmОтветить с цитатой
ПФ могут ухудшиться, если мне нужно будет зумить страницу, чтобы найти нужное. И двигать по вертикальному скролу.
А так, наоборот одни плюсы Smile Юзер с большого экрана видит всё, юзер с мобильника не видит часть элементов, которые не нужны.
Резиновая верстка и относительные размеры — это конечно хорошо, если контент подается как блог без сайтбаров и прочих боковых элементов. Если они есть, то такими вот css-трюками их можно убирать.
Oscar the grouch Здесь могла быть ваша реклама

Kamilla
Гуру
Зарегистрирован: 09.07.2013
Сообщений: 1315
Обратиться по нику
# Добавлено:Ср Сен 16, 2015 7:32 amОтветить с цитатой
Мануал по адаптивному дизайну от Google developers

Miss Content
V.I.P.
Зарегистрирован: 05.03.2010
Сообщений: 7881
Обратиться по нику
# Добавлено:Чт Сен 17, 2015 10:16 amОтветить с цитатой
Полезная ссылка. Сервис "Просмотр с мобильного устройства" Данный сервис поможет Вам быстро составить представление о том, как выглядит Ваш сайт на популярных мобильных устройствах.
Место для Вашей рекламы!

ars_
Опытный
Зарегистрирован: 04.08.2008
Сообщений: 136
Обратиться по нику
# Добавлено:Чт Сен 17, 2015 2:45 pmОтветить с цитатой
Для создания "адаптированных сайтов" я использую twitter bootstrap, слегка подпиленный под себя.
Уровень вхождения — выше среднего, но оно того стоит: один раз освоенный - позволяет без особых заморочек создавать кроссплатформенную и кроссбраузерную вёрстку любой сложности (даже на основе единственного psd-макета, рассчитаного на "стандарный" десктопный размер экрана). Если же более абстрактно — все подобные "движки", конечно же, используют media queries и относительные размеры. Для примера — основные css правила, с помощью которых можно создавать такие сайты:
Код:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

لعبة الحياة

Miss Content
V.I.P.
Зарегистрирован: 05.03.2010
Сообщений: 7881
Обратиться по нику
# Добавлено:Пт Сен 18, 2015 10:26 amОтветить с цитатой
Как и обещала, перевод статьи о создании дизайна сайта под мобильные устройства.
Место для Вашей рекламы!

Лик
V.I.P.
Зарегистрирован: 03.07.2010
Сообщений: 4501
Обратиться по нику
# Добавлено:Пт Сен 18, 2015 1:48 pmОтветить с цитатой
Эмуляторы для проверки мобильных сайтов

www.mobilephoneemulator.com
http://mattkersley.com/responsive/
www.responsinator.com

ars_
Опытный
Зарегистрирован: 04.08.2008
Сообщений: 136
Обратиться по нику
# Добавлено:Сб Сен 19, 2015 10:56 pmОтветить с цитатой
Эмуляторы для проверки мобильных сайтов (sic)... встроены в браузеры и вызываются клавишей F12, а далее - спец-кнопкой, как на скринах:

• Firefox


• Chrome
لعبة الحياة

Kattrin +
Свой
Зарегистрирован: 20.08.2015
Сообщений: 28
Обратиться по нику
# Добавлено:Вт Сен 22, 2015 1:27 pmОтветить с цитатой
адаптивная версия сайта должна немного отличаться от основного сайта (в плане простоты). На ней должно быть меньше всяких картинок и тому подобного, перекликаться должны только основные элементы сайта я считаю

Kamilla
Гуру
Зарегистрирован: 09.07.2013
Сообщений: 1315
Обратиться по нику
# Добавлено:Вт Сен 22, 2015 2:09 pmОтветить с цитатой
Хорошей идеей будет использование QR кодов на мобильной версии сайта. На небольшом пространстве можно уместить кучу информации.

Новая тема Написать ответ    ГЛАВНАЯ ~ ТЕХНИЧЕСКИЕ ВОПРОСЫ

Перейти:  





Генеральный спонсор



Партнеры