Несколько советов по адаптивному дизайну - PullRequest
Новая
       11

Несколько советов по адаптивному дизайну

1 голос
/ 17 ноября 2011

В настоящее время я разрабатываю веб-сайт портфолио с WordPress.Идея состоит в том, что все будет на одной странице, и используйте js для прокрутки вверх и вниз.

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

В моем текущем дизайне я показываю свои примеры работы в виде слайд-шоу.Я использую этот плагин http://css -tricks.com / 3412-anythingslider-jquery-plugin / .Мой первый инстинкт - убрать эти слайд-шоу для мобильных устройств и использовать только одно изображение для каждой работы.Это хорошая идея?

Также я видел несколько адаптивных уроков по дизайну, которые используют одни и те же изображения для всех разрешений, а затем уменьшают их с помощью css.Должны ли я иметь разные (размерные) изображения для мобильных устройств?например, 

@media screen and (max-device-width: 480px) {
  .img {
    background:url(site-small.jpg)
  }
}
@media screen and (max-device-width: 600px) {
  .img {
    background:url(site-large.jpg)
  }
}

Как я уже сказал, мой сайт портфолио находится на одной странице, и я использую функцию jquery ScrollTo (), чтобы получить этот эффект при навигации http://two24studios.com/. Для мобильной версии, должен ли яудалить это или нет?

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

Я использую один встроенный шрифт для дизайна, можно ли сохранить его для мобильной версии или есть какие-либо ограничения на это, например, поддерживают ли мобильные браузеры встраивание @ font-face.

И самое последнее, я планирую создать новую страницу в WordPress и назвать ее чем-то вроде «детская площадка», которая будет иметь список демонстраций на html5, CSS3 и тому подобное, просто чтобы продемонстрировать свои навыки.Должен ли я включить это в мобильную версию или нет.Поскольку я думаю, что мобильный пользователь не может этим воспользоваться?

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

1 Ответ

0 голосов
/ 23 ноября 2011

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

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

Прокрутка до, вероятно, будет работать нормально. Одно из соображений, которое вы, возможно, захотите принять, - это использовать события касания, а не события щелчка, если вы используете JavaScript для функции scrollTo. (A презентация о сенсорных событиях .)

Что касается страницы вашей игровой площадки, то это будет полностью зависеть от того, какие демоверсии вы планируете разместить там. Я бы проверил ваши примеры на мобильных устройствах, чтобы увидеть, имеют ли они смысл и работают ли они правильно; если они это сделают, то покажите их. Если нет, то улучшите их, чтобы они работали на мобильных устройствах, или не показывайте их на мобильных устройствах.

...