Перейти к содержимому


Пользователь месяца
Ixman Ixman 1-й за Октябрь
Очков активности: 693 0 тем, 33 сообщения, 14 баллов репутации
Сайт: o5cat.ru
ТОП самых активных за этот месяц
  • Фотография yuran
    #1

    yuran (yurbol.ru)
    Очков активности: 78 0 тем, 52 сообщения, 1 балл репутации

  • Фотография ShowPrint
    #2

    ShowPrint (ShowPrint.ru)
    Очков активности: 58.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #3

    BLIK
    Очков активности: 48 Вне конкурса за определение пользователя месяца

  • Фотография WGN
    #4

    WGN (worldgamenews.com)
    Очков активности: 37.5 Вне конкурса за определение пользователя месяца

  • Фотография Mandarin
    #5

    Mandarin
    Очков активности: 34.5 0 тем, 23 сообщения, 1 балл репутации

  • Фотография Ixman
    #6

    Ixman (o5cat.ru)
    Очков активности: 30 Вне конкурса за определение пользователя месяца

  • Фотография pozitron123
    #7

    pozitron123
    Очков активности: 30 2 темы, 14 сообщений, 1 балл репутации

  • Фотография Mariko
    #8

    Mariko
    Очков активности: 15 1 тема, 7 сообщений, 1 балл репутации

  • Фотография RosenRot
    #9

    RosenRot (abuzov.com)
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

  • Фотография r0mZet
    #10

    r0mZet (rz-style.ru)
    Очков активности: 12 1 тема, 5 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 31.10.2018
  • Яндекс выдача: 13.11.2018
Топ 5 участников по репутации


Просьба навести критику на адаптированность страницы

#1 master-vek

master-vek
  • Пользователь
  • 236 сообщений
  • Репутация: 12
0

Отправлено 30 December 2017 - 01:20

Уважаемые знатоки.

Мне предстоит  верстать несколько страниц по знакомой тематике типа производство и продажа  металлических дверей.

 

Задумка была создавать под каждую модель одну страницу. Но на главной хочу вывести все модели как бы выставка.

 

Сверстал тестовую страницу попутно для не нужных вещей и расположил их в порядке как будто это двери, естественно, не равнял.

 

Вопрос: как Вы оцениваете адаптированность контента от 1024рх до 240 рх? Я то посмотрел, но со стороны виднее. Вариант простейший. Одни фото и текст.

 

Вот эта страница безо всякой рекламы, чисто тестовая.    https://servis.kharkov.ua/podaru/

 

Спасибо всем за конструктив.


 

 

  • 0

#2 miketomlin

miketomlin
  • Пользователь
  • 515 сообщений
  • Репутация: 109

Отправлено 30 December 2017 - 11:14

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

 

P.S. С копирайтом разберитесь. Зачем между частями верт. черта? А в конце – это вообще нечто!


P.P.S. К подписям/надписям вы вообще крайне неаккуратно относитесь. Если не отделяете визуально название от цены, нужно использовать пунктуацию. С пробелом перед названием валюты тоже разберитесь. Обычно пробел ставят, особенно когда не используется спец. знак валюты.


  • 1


#3 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 236 сообщений
  • Репутация: 12

Отправлено 30 December 2017 - 11:39

С копирайтом разберитесь. Зачем между частями верт. черта? А в конце – это вообще нечто!

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

Действительно, с текстом вакханалия, это понятно. Конечно будет аккуратнее в оригинале. Вертикальные черты, что сейчас не принято? Тут немного не до понял. Просто взял стандартный шаблон  со старыми надписями безо всякой привязки к этой странице.

 

Главное - адаптированность дизайна. Собственно в этом и вопрос.  Адаптация портретная.  Точки перелома: 768px, 600, 560, 480, 384, 320, 240px.


  • 0

#4 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 236 сообщений
  • Репутация: 12

Отправлено 30 December 2017 - 11:58

Дополнительно хотел сказать, вёрстку сделал через один контейнер с тремя вертикальными вложенными контейнерами. Так и удерживал их ориентацию до последнего расширения 320рх.

 

А тут пришла мысль сделать каждую строку рисунков через отдельные списки  (ссылки рисунками), число рисунков мах возможное для  монитора 2 дюйма. Тогда деформация каждого списка должна происходить в пределах одного списка - divа, сохранив альбом до определённого расширения.


  • 0

#5 miketomlin

miketomlin
  • Пользователь
  • 515 сообщений
  • Репутация: 109

Отправлено 30 December 2017 - 12:51

Вертикальные черты, что сейчас не принято?

Принято, но для отделения друг от друга чего-то независимого. Вы же дробите копирайт. А в конце оставляйте только в том случае, если имеется продолжение. Understand?

 

 

Главное - адаптированность дизайна. Собственно в этом и вопрос.

Это понятно. А в остальном вы рады и дальше косячить? Или все-таки готовы принять мой совет? :)


Сообщение отредактировал miketomlin: 30 December 2017 - 12:52

  • 0


#6 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 236 сообщений
  • Репутация: 12

Отправлено 30 December 2017 - 15:35

А в остальном вы рады и дальше косячить? Или все-таки готовы принять мой совет?

 

Не просто принял ваш совет, я даже написал  следующее: "Действительно, с текстом вакханалия, это понятно. Конечно будет аккуратнее в оригинале".Understand.


  • 0

#7 Ixman

Ixman
  • Пользователь PRO
  • 2933 сообщений
  • Репутация: 765

Отправлено 30 December 2017 - 17:44

@master-vek, может на минимально экране сделать центрирование картинок. А то как-то сейчас в разнобой.


  • 0


#8 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 236 сообщений
  • Репутация: 12

Отправлено 30 December 2017 - 19:41

может на минимально экране сделать центрирование картинок. А то как-то сейчас в разнобой.

 

Спасибо за внимание.

 

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


  • 0

#9 Ixman

Ixman
  • Пользователь PRO
  • 2933 сообщений
  • Репутация: 765

Отправлено 30 December 2017 - 20:52

@master-vek, в разнобой, это я про отступы. И косяк видимо вышел когда я в эмуляторе сжимал экран. Были разные отступы у картинок от левого края. А так они выравнены по левому краю. Но я бы их сделал по центру.

 

44340845bc.jpg


  • 0


#10 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 236 сообщений
  • Репутация: 12

Отправлено 30 December 2017 - 23:03

Но я бы их сделал по центру.

 

Хотел и я по центру. Вроде там же и смотрел. Возможно браузер, возможно и я не досмотрел.  Спасибо за подсказку.

 

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

 

Вот что значит, сбоку всегда виднее.


Сообщение отредактировал master-vek: 30 December 2017 - 23:22

  • 0

#11 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 236 сообщений
  • Репутация: 12

Отправлено 08 January 2018 - 21:03

Мне пришли персональные сообщения посмотреть пару проектов с высокой функциональностью.  Один про сантехников и другие услуги мне очень понравился.  Есть чему подражать.

 

Второй проект кредитного общества как то не показался  увлекательным.

 

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


  • 0

#12 fedornabilkin

fedornabilkin
  • Модератор
  • 1132 сообщений
  • Репутация: 193

Отправлено 09 January 2018 - 12:05

Прошу меня простить и не обижаться. Это не адаптивная верстка, это обычный "резиновый" диз. Адаптивная верстка подразумевает под собой оптимальное расположение элементов страниц в зависимости от разрешения экрана. В вашем случае элементы сжимаются/растягиваются. На странице у вас три колонки (вроде как независимые), но в них одинаковый контент. Если не планируете на странице размещать боковое меню и т.д., что мешает разместить все картинки в одном потоке (контейнере)? Смущает разная высота картинок? Стоит привести все картинки к единому стандарту.

 

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

Зеленые надписи в хедере, я бы расположил на одной строке (экономия целой строки), на малых экранах можно на двух строках.

Ранее было замечено. Необходимо отделить подпись картинки и цену. Например, подпись сверху, цену снизу. Цену выделить цветом или жирным.

Если используете элемент <header, зачем брезгуете элементом <footer? Тэги h1-h6 имеют свое предназначение, вроде бы для заголовков и подзаголовков. Уж точно не для копирайтовских надписей в футере.

 

Зашел разговор о семантической верстке, значит основной контент оборачиваем в тэг <article, а однотипные блоки можно уложить в <section, тогда управляться с ними будет проще.

<article>
  <section>
    <div class="name">Name item</div>
    <div><img src="img.png" alt=""></div>
    <div class="price">10 Гр</div>
  </section>
  <section>...</section>
  <section>...</section>
</article>

Кнопку "Вверх" можно не вкладывать в тэг <p, лишний вроде. А если надо, то стили позиционирования надо применить к этому тегу, чтобы не занимал строку.

На маленьких экранах контент липнет к левой и правой границе устройства. Надо бы сделать отступ по 5px хотя бы.

 

Файл стилей это вообще шедевр :)

Первое, что бросилось в глаза .clear {clear: both;} Зачем столько много раз? Если подразумевалось, что .clear будет находиться внутри конструкций @media screen, то надо было его туда и добавить, хотя это лишнее. Достаточно объявить правило один раз.

 

В конструкции @media screen необходимо указывать только те правила, которые хотим изменить, остальные правила переписывать нет смысла.

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

Вот пример одного брекпоинта (как бы я сделал):

.kontainer{border: 1px dashed #666666; max-width:1024px; padding: 10px; margin: 10px auto; text-align:center}
.left{width:300px; margin:0px auto; padding:0; float:left; border:1px solid #e2e2e2}
.right{width:300px; margin:0px auto; padding:0; float:right}
.center{width:300px; margin:0px auto; padding:0}
.clear{clear: both}
@media screen and (max-width: 900px){
.kontainer{padding: 0px; margin: 0px auto}
.left{width:240px}
.right{width:240px}
.center{width:240px}
}

Если мы собрались делать адаптивную верстку, то есть смысл переходить от px к rem. Rem это почти как em, только наследуется от корневого элемента, а не от родительского. Например в стилях у нас так:

html{font-size:16px}
.item{width:1rem}

Тогда элементы с классом .item будут иметь ширину 16px, 2rem сделает ширину 32px, .5rem дает 8px и т.д. Сила такого подхода в том, что на брекпоинтах с помощью конструкций @media screen мы можем повлиять на все элементы разом, изменив только html{font-size:16px}. Все размеры изменятся пропорционально. При уменьшении ширины экрана мы уменьшаем размеры до некоторой степени, но потом их приходится увеличивать, что бы на слишком малых экранах не смотреть в мелкий шрифт.

 

Адаптивная верстка подразумевает изменение позиционирования элементов, а не только лишь изменение величин.


Сообщение отредактировал fedornabilkin: 09 January 2018 - 12:07

  • 2

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#13 ShowPrint

ShowPrint
  • Пользователь PRO
  • 3069 сообщений
  • Репутация: 843

Отправлено 09 January 2018 - 12:38

Я не ставлю, потому что пробел это тоже символ
Таки и в середине тоже можно избавиться от пробелов  ;)  
.kontainer{border:1px dashed #666;max-width:1024px;padding:10px;margin:10px auto;text-align:center}
.left{float:left;border:1px solid #e2e2e2}
.right{float:right}
.center,.left,.right{width:300px;margin:0px auto;padding:0}
.clear{clear:both}
@media screen and (max-width:900px){
.kontainer{padding:0px;margin:0px auto}
.left{width:240px}
.right{width:240px}
.center{width:240px}
}

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#14 fedornabilkin

fedornabilkin
  • Модератор
  • 1132 сообщений
  • Репутация: 193

Отправлено 09 January 2018 - 12:48

Таки и в середине тоже можно избавиться от пробелов

Так и нужно, но это дело не верстальщика, а скриптов-минификаторов. Вот за это я люблю ВДС, поставил туда ноду и галпом можно минифицировать скрипты и стили. 


  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#15 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 236 сообщений
  • Репутация: 12

Отправлено 09 January 2018 - 17:23

 

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

 

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

По достижении размеров от 800рх десктоп заканчивается. Совместное просматривание  в прежнем масштабе становиться не комфортным. Начал немного менять размеры картинок и отступов, освобождая место под сжатие.  Картинки для просмотра не пострадали в качестве. аж до 400рх. 

 

Собственно, добивался комфортного просмотра на всех, без исключения малоформатных разрешениях. Мне казалось, что такой просмотр и есть адаптивность. Картинки почти не меняются, шрифт тоже. При резиновой вёрстке, кроме съезжания текста и его масштабирования, смещения картинок без изменения их размеров, не обеспечивается никак просмотр на малоформатных дисплеях. Вот тут бы уточнить.

 

Про хедер, Вы очень хорошо советуете, обязательно учту в работе.

 

Вот этого я просто не знал:

html{font-size:16px}

.item{width:1rem}

 

Сильная фишка. Спасибо.

 

Про пробелы как то не задумывался о их важности. Знаю, что в HTML5 есть параметр  на автомате ставит только один пробел в текстах.  А в стилях придётся учитывать.   Тогда и между строками стилей тоже это иметь в виду?

 

Оказывается и комментирование  что то весит.

 

Однако, я очень рад, что fedornabilkin так здорово разложил всё по полочкам. Я очень благодарен за качествееый анализ и помощь. Воспользовался возможностью  добавить рейтинг куратору.


  • 0

#16 fedornabilkin

fedornabilkin
  • Модератор
  • 1132 сообщений
  • Репутация: 193

Отправлено 10 January 2018 - 09:57

Я настоятельно рекомендую использовать в своей работе bootstrap. Сам его долго избегал и был одурманен стандартными стереотипами (зачем чужой код, много весит и т.д. и т.п.), но его плюса с лихвой перекрывают все мнимые минуса :)

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

 

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

 

Изучить основы не составит труда, даже если вы не знаете англ. яз. Документация усыпана примерами настолько обильно, что текст вообще можно не читать (я и не читал, только код примеров смотрел). Не зная продукт, мы не можем сказать хорош он или плох. Я познакомился с ним и теперь двумя руками за. Предлагаю начать с 3 версии, потому что 4 находится в beta. А 4 версия по сравнению с 3 вообще бомба. Будут вопросы, всегда готов помочь.


  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#17 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 236 сообщений
  • Репутация: 12

Отправлено 10 January 2018 - 12:36

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


  • 0

#18 fedornabilkin

fedornabilkin
  • Модератор
  • 1132 сообщений
  • Репутация: 193

Отправлено 10 January 2018 - 21:24

А мне казалось, что там много лишнего и не нужного.

Так лишнее и ненужное можно не использовать, а когда понадобится, то уже готово.

Посмотрел сейчас по размерам:

css - 17.5 kb

js - 11.6 kb

 

Разве ж это вес, о котором стоит беспокоиться? Все равно как лого на сайт или аватарка. Учитываем кэширование браузером и в остатке остаются одни плюсы.

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

Думайте сами, решайте сами, верстать или не верстать ;) 


  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#19 master-vek

master-vek
    Topic Starter
  • Пользователь
  • 236 сообщений
  • Репутация: 12

Отправлено 11 January 2018 - 18:51

решайте сами, верстать или не верстать

 

Посмотрел ссылку, на первый взгляд, мало что понятно. Но, разобраться думаю можно. Тем более, Вы даёте добро и рекомендуете Bootstrap 3.

 

Хочу спросить вашего мнения. Что надо знать, что бы на заказ выполнять только вёрстку страниц без программирования?  Вот к примеру  человек купил шаблон сайта в PSD формате. Задание - надо выполнить нарезку и вёрстку главной страницы.сайта на базе HTML5 и CSS3 и возможно JavaScript + сколько то страниц? Можно ли этим зарабатывать и как это выглядит в денежном диапазоне? "  На сколько это востребовано.


Да, забыл показать страничку будущего сайта из составных одно страничников.

 

Snap-2018-01-11-at-17.37.jpg


  • 0

#20 ShowPrint

ShowPrint
  • Пользователь PRO
  • 3069 сообщений
  • Репутация: 843

Отправлено 11 January 2018 - 20:56

Посмотрел ссылку, на первый взгляд, мало что понятно. Но, разобраться думаю можно
Разобраться со всем можно.

Попробуйте почитать о Bootstrap по-русски, например здесь (тынц), возможно станет понятнее  ;)  


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru