Вверх ↑
Мне нравится:
Поделиться в соцсетях:
Как найти своё предназначение?

 

 

Разрешение экранаЕщё лет 15-20 назад сайтами владели только крупные фирмы, и сайты эти были весьма однообразными и несли в себе не очень много информации.

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

Но как сделать это правильно? Как сделать так, чтобы люди приходили на ваш сайт и не хотели уходить? Ответить на эти вопросы в одной статье не удастся. Не удастся и в десяти статьях, так как тема эта очень большая.

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

Сегодня спектр разрешения мониторов настолько широк, что делать сайт для какого-то определенного разрешения было бы совсем не правильно.
Рассмотрим с вами пример. Вы делаете сайт с постоянным разрешением 800х600. Для человека, у которого монитор именно с таким расширением, просмотр вашего сайта будет очень комфортным. У его соседа монитор более новый, с разрешением 1280х1024. При просмотре ваш сайт будет занимать постоянно чуть более половины экрана, принося большой дискомфорт пользователю, так как край все время будет пустым.

Другой пример. Вы сделали сайт с постоянным разрешением 1280х1024. Человек, у которого такое же разрешение экрана, и слова вам не скажет, так как будет наслаждаться просмотром. У того, у которого разрешение больше, также, как и в прошлом случае, сайт будет занимать лишь некоторое пространство монитора. А вот те, у кого разрешение меньше, должны будут постоянно прокручивать горизонтальные и вертикальные скролы, чтобы добраться до разных концов страницы. Согласитесь, в такой обстановке работать не очень-то и комфортно.

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

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

Заботьтесь о пользователях, и тогда они позаботятся о вас.

Проголосуйте за статью, нажмите



Комментарии (49)
  1. Ирина:

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

  2. Сергей:

    Сначала начал читать статью, немножко испугался, что при настройке своего сайта упустил какую-то деталь. Хорошо, что в в школе STURT UP вы нам рекомендовали пользоваться wordpress. Но за статью всё равно спасибо, полезная информация, может когда-нибудь и пригодится)

  3. Кирилл:

    Спасибо за еще одну интересную статью!!!

  4. Айрат:

    Спасибо за полезную информацию!

  5. Александр:

    Все правильно подмечено. Неприятно на сайте все время просматривать и передвигать горизонтальную планку.

  6. Сергей:

    У меня такие проблемы уже возникали. Какое разрешение выставить, чтобы всем было комфортно. Так оказывается все просто, движок вордпресс все сам делает. Спасибо за информацию.

  7. Владимир Филиппов:

    Спасибо Михаил! При прохождении курса Старт-ап я постоянно сталкивался с тем что изображение на моем экране занимало треть экрана и читать его было очень тяжело. Буду иметь ввиду.

  8. Валерий:

    Спасибо за совет. Пока читал – думал, что надо еще раз проверить на разных компьютерах как выглядит блог. Но у меня блог на Вордпресс, а значит экономим время для другого.

  9. Святослав:

    Благо,пока никаких проблем не было…Но,нужно всегда быть на шаг впереди и не расслабляться.

  10. Виктор:

    Спасибо за хороший совет!

  11. Ольга Рысакова:

    Спасибо! Постепенно расширяется поток знаний!

  12. Наталья:

    У меня нетбук, и все равно приходится прокручивать экран. А можно ли это также настроить?

  13. Yelena Richy:

    Почерпнула много полезного. Благодарю!

  14. Александр:

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

  15. Name (required)Вероника:

    спасибо. что так щедро делитесь знаниями!!!!

  16. Приятно получать действительно полезные советы.

  17. Так все просто и легко. спасибо за ценные рекомендации.

  18. Petr:

    Все гениальное просто! Спасибо за полезную информацию!

  19. Спасибо за дельное предложение. В ваших статьях всегда полезные советы.

  20. Людмила:

    Спасибо за дельную информацию, возьму на вооружение!

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

  22. Извините,мне как раз надо решить этот вопрос..Я не понимаю Где находится этот блок, в котором надо исправить пиксили на проценты??? Движок у меня на Вордпрессе, но, к сожалению,на другом компьютере мой сайт идёт в очень узком варианте…Что делать???

    Самостоятельно лучше не влезать без специальных знаний. Для решения вопроса следует нанять фрилансера на free-lance.ru, который Вам быстро все сделает, заодно и код посмотрит внимательно бесплатного шаблона.

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

  24. Спасибо большое,Михаил! Как раз раздумывала об этом после установки Хрома. Мой сайт стал узким. Только можно уточнение. В статье говорится о ширине или длине? У Вас написано 100% длины

    О ширине

  25. Start Up и WordPress рулят!!! Ура!!!

  26. Спасибо за статью! С такими проблемами еще не сталкивался, но учту на будущее!

  27. Если бы ещё темы были подходящие, а то как ни возьмёшь ту, которая нравится визуально, оказывается она совсем не подходит технически. Похоже надо изучать html

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

  28. Спасибо, Михаил! Неожиданное сообщение. Хорошо, что у меня движок WordPress.
    Надо еще посмотреть свой сайт в других браузерах.

  29. Статья хорошая и прикольная!Спасибо.

  30. Понятно, что нужно сделать,не понятно как?
    Ведь расширение, как я понимаю определяет тема.

  31. Спасибо за информацию. Было бы неплохо, если бы Вы написали еще несколько полезных статей о настройках тем для сайта.

  32. Лень двигатель прогресса! Поэтому мой сайт тоже на Вордпрессе :-)

  33. Спасибо за полезную информацию Михаил.

  34. Vera:

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

  35. Ваша статья еще раз подтвердила мое убеждение – надо начинать дело с надежными партнерами ( такими как Евгений и Михаил).На обучении в Старт Ар даже и не знала обо всех таких трудностях, о которых говорится в вашей статье. Вы говорили – делай так – и мы делали . Спасибо вам за наше обучение.

  36. В очередной раз мои благодарности за указанные ньюансы.Хорошо, что сайт на движке WordPress!

  37. Дочитала до конца и расслабилась…у меня ведь тоже WordPress, как и у всех нормальных учеников Start Up.

  38. «Выбираешь тему для Ворд Пресс, которая сделана с умом и в которой учтен этот момент и не ломаешь себе голову»

    Как определить – с умом эта тема сделана или без ума? Только методом проверки на разных экранах? Себе бы тоже ума хочется побольше:)

    Самый простой и надежный: проверить на нескольких и экранах и в разных браузерах.

  39. Такие советы просто как палочка-выручалочка! Спасибо!

  40. Над этой темой даже не задумывалась. Спасибо за разъяснения.

  41. У меня WP, значит все в порядке. Видел свой сайт на других компах, все корректно. Другое дело, что разные браузеры выдают некоторые элементы и цвета по разному.

  42. Вот что прочитала на одном форуме про это:
    Надо определить и нарисовать на бумаге структуру шаблона – расположение основных блоков друг относительно друга.

    Затем изучить соответствующую их CSS графику – на предмет ее «растягиваемости» (к примеру, зачастую скругленные блоки весьма непросто растянуть именно из-за графики…)

    А уже потом сообразно получившейся схемы смотреть – а удастся ли вообще сделать данный шаблон резиновым?

    Так что замена пикселей на проценты в этой цепочке – самое последнее мероприятие, и не факт, что оно вообще понадобится.

  43. Михаил, а если пока нет денег на фрилансера, Вы можете подсказать, куда надо зайти, чтобы поменять пиксели на проценты?

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

  44. Спасибо за полезный совет!

  45. Спасибо за классную статью Михаил и спасибо за Start Up!!!

  46. Интересно. Я даже такого и не знала! Сейчас посмотрю, какое разрешение на моем сайте (если найду конечно :) )

  47. Alex:

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

  48. Да, действительно, а как узнать, какое разрешение на моем сайте, если не смотреть его на разных мониторах.
    Денег пока нет для фрилансеров.((

  49. Здравствуйтее. Прочитал Вашу статью на тему резины в верстке, вы кое-что недосказали. Помимо смены ширины на проценты, необходимо еще определится со значением max и min-width, обычно это 1600px и 980px соответственно. Иначе как было сказано выше, внутренние слои с фиксированной шириной будут «назжать» друг на друга или наоборот между ними будут слишком большие и некрасивые отступы. И на напоследок хотел отметить, что сегодня все больше и больше ресурсов переходят на адаптивную верстку, на wordpress уже есть масса красивых адаптивных (responsive) шаблонов

Комментарии

Сообщение