|
На страницу 1, 2 След. |
|
|
|
| Здравствуйте уважаемые форумчане. Возможно ли создать адаптивный сайт таким образом чтобы его адаптивный вариант (с расширением ширины экрана 800 и меньше)немножко отличался по дизайну и наполнению от неадаптивного варианта (с ширины экрана больше 800) одного и того же сайта ? |
|
|
|
|
|
|
|
| Вот статья по дизайну мобильных сайтов, если будет время, переведу ее на этой неделе. |
|
|
|
|
|
Часто мобильная версия настолько отличается от обычной, что на знакомом сайте ничего не найти.
|
|
|
|
|
|
| Да, Media-запросы. При помощи этих правил можно настраивать отображение различных элементов в зависимости от параметров экрана и т.п |
|
|
|
|
|
Можно, так часто и создают мобильный шаблон гораздо проще, чем дестопный.
Но, ИМХО, от этого могут сильно ухудшаться ПФ, поэтому выбираю шаблоны с мобильной версией, похожей на основной шаблон. То есть, резиновая верстка, относительные размеры изображений и слоев, а вместо меню - кнопка меню, т.к. места на экране мобильного девайса не очень много, нужного его использовать с максимальной эффективностью. |
|
|
|
|
|
ПФ могут ухудшиться, если мне нужно будет зумить страницу, чтобы найти нужное. И двигать по вертикальному скролу.
А так, наоборот одни плюсы  Юзер с большого экрана видит всё, юзер с мобильника не видит часть элементов, которые не нужны.
Резиновая верстка и относительные размеры — это конечно хорошо, если контент подается как блог без сайтбаров и прочих боковых элементов. Если они есть, то такими вот css-трюками их можно убирать. |
|
|
|
|
|
| Мануал по адаптивному дизайну от Google developers |
|
|
|
|
|
| Полезная ссылка. Сервис "Просмотр с мобильного устройства" Данный сервис поможет Вам быстро составить представление о том, как выглядит Ваш сайт на популярных мобильных устройствах. |
|
|
|
|
|
Для создания "адаптированных сайтов" я использую 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) { ... }
|
|
|
|
|
|
|
| Как и обещала, перевод статьи о создании дизайна сайта под мобильные устройства. |
|
|
|
|
|
|
|
Эмуляторы для проверки мобильных сайтов (sic)... встроены в браузеры и вызываются клавишей F12, а далее - спец-кнопкой, как на скринах:
• Firefox
• Chrome
|
|
|
|
|
|
| адаптивная версия сайта должна немного отличаться от основного сайта (в плане простоты). На ней должно быть меньше всяких картинок и тому подобного, перекликаться должны только основные элементы сайта я считаю |
|
|
|
|
|
Хорошей идеей будет использование QR кодов на мобильной версии сайта. На небольшом пространстве можно уместить кучу информации.
|
|
|
|
|
|
|
