Оцените HTML

[littlestrow]

Оцените HTML

Сверстал для примера.

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Проверить реакции на переполнение (как будет вести себя страница при разных вариантах заполнения ее блоков, как в ширину, так и в длину) можно потянув за хвостик любого из красных контрольных квадратиков.

Сделано табличками: получилось лаконично, мягко реагирует на переполнение, автоматом все выравнивается, сохраняется структура страницы, высота 100%, динамические рамочки и т.п.

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

Буду рад любой критике.

ЗЫ Размер: html - 5К, CSS - 6K.

 

[prometheus]

Изначально цель неправильная была выбрана. Нужно реагировать на переполнение не раздавливанием блока и при этом меняется ширина окна, а наоборот подстраиваться под ширину и размеры окна клиента.

 

[littlestrow]

prometheus, ты спутал зеленое с кислым.

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

А вот подгонка под размер окна клиента это совсем другая история.

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

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

-

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

-

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

-

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

-

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Фирмы эти все некрупные, денег на приличных дизайнеров и верстальщиков нет, обходятся работами людей, ставящими "изначально неправильные цели". Именно такой подход реализован в моем примере.

Другие дизайнеры растягивают станицу всегда на 100% ширины экрана. Там другой подход. В простейшем случае, как на нашем сайте, где мы общаемся сейчас, просто идет растягивание текстового поля. В моем примере получить 100% ширины, то есть добиться эффекта, как здесь, можно одной цифрой в стилях. Это не сложно. Вопрос, "нужно ли", а не "можно ли".
Вот:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Интересны решения уровня sony.com, microsoft.com, или samsung.com их адаптация под размер окна клиента впечатляет. В будущем попробую повторить что-то такое. Просто, там уже дело не только в верстке, а еще и в эскизе. Мой эскиз по таким правилам не сверстаешь. Надо будет придумать другой дизайн из квадратиков и сделать.

 

[imprint]

Странная задача в 2015 году табличная верстка и HTML 4.01 )
Если делаете для своих личных целей то конечно лучше делать так как удобнее и быстрее для вас.
Если это комерческий проект или вы планируете в дальнейшем заниматься маркапом то лучше переделать то же самое в div. Это будет полезное упраженение)
Оценить верстку сложно без исходного дизайна.
Если брать только код
- если вы нацелены на международное сообщество лучше использовать UTF-8
- есть инпуты но пропущен тэг <form>
- style="padding:20px;" в html коде не должно быть стилей. Разве что в случае если этот параметр должен задаваться в бэкэнде.
- элементы не тянуться в ИЕ
- элементы типа "Второй >>" вероятно должны быть ссылками
- меню верстают списком. Тогда не будет проблем с интеграцией такой верски с CMS.
- img без размеров. Это логично для адаптивной верски, но не в этом примере.

 

[prometheus]

prometheus, ты спутал зеленое с кислым.

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

А вот подгонка под размер окна клиента это совсем другая история.

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

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

-

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

-

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

-

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

-

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Фирмы эти все некрупные, денег на приличных дизайнеров и верстальщиков нет, обходятся работами людей, ставящими "изначально неправильные цели". Именно такой подход реализован в моем примере.

Другие дизайнеры растягивают станицу всегда на 100% ширины экрана. Там другой подход. В простейшем случае, как на нашем сайте, где мы общаемся сейчас, просто идет растягивание текстового поля. В моем примере получить 100% ширины, то есть добиться эффекта, как здесь, можно одной цифрой в стилях. Это не сложно. Вопрос, "нужно ли", а не "можно ли".
Вот:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Интересны решения уровня sony.com, microsoft.com, или samsung.com их адаптация под размер окна клиента впечатляет. В будущем попробую повторить что-то такое. Просто, там уже дело не только в верстке, а еще и в эскизе. Мой эскиз по таким правилам не сверстаешь. Надо будет придумать другой дизайн из квадратиков и сделать.

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

Вот твое поведение страницы. Если название статьи длинное то окно начинает распирать

 

[littlestrow]

Ну так зайди и попробуй так же как у меня.
Если контент большой, с этим ничего не поделаешь.
Придется терпеть скроллинг.

А чтобы уметь воспринимать "много букафф", нужно больше книжек читать... )))