Обзор сайта для помощи по адаптивному дизайну

Всем привет,

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

Мы используем систему управления контентом, поэтому объем, который я могу редактировать самостоятельно, довольно ограничен — большинство «бэкэнд»-задач требуют от меня возвращения в компанию, которая изначально создала сайт (я могу просто редактировать контент).

Мне кажется, что некоторая отзывчивость работает не так, как предполагалось - например, когда я смотрю на сайт на своем iPhone или iPad (или даже когда я просто уменьшаю окно), кажется, что изображения не Не масштабируются должным образом.

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

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

По сути, я просто ищу конкретные факты, которые я могу собрать и отправить обратно в компанию CMS, чтобы, надеюсь, они были исправлены.

Я, очевидно, хочу, чтобы сайт выглядел как можно лучше как на настольном компьютере, так и на мобильном устройстве/планшете. Сайт моей организации: http://www.dpjcc.org/

Заранее благодарим за любую информацию, которую вы можете предоставить!

Что ж, загрузка занимает приятное время — здесь более 30 секунд, и причина этого очевидна; Сайт занимает 1,6 мегабайта в 50 отдельных файлах.

В то время как огромные баннеры, занимающие много места, которые заставляют пользователей думать: «Где же говядина?» - первое, что следует заподозрить - от того, что пахнет каким-то художником, находящимся в ЗАБЛЮДЕНИИ, что они что-то знают о дизайне, - проблема не в этом.

Безумные 1,3 мегабайта скриптов Batshit в сочетании с 178 тысячами CSS, охватывающими около двадцати двух отдельных файлов, отдают уровнем некомпетентности разработчика, который прямо говорит: «Тот, кто это создал, еще не готов создавать веб-сайты».



Количество файлов всегда вызывает беспокойство: практическое правило заключается в том, что в идеальных обстоятельствах каждый файл после первых восьми добавляет к странице дополнительную пятую секунды времени загрузки; в худшем случае это может быть секунда или больше, в зависимости от количества «прыжков» между браузером и сервером; и это НЕЗАВИСИМО от того, насколько быстрое у вас соединение.

Что касается отзывчивости, то это определенно не так.

Он наполнен элементами дизайна, такими как баннеры во всю ширину, которые практически не имеют никакого отношения к веб-сайту, если вы вообще заботитесь о доступности, а адаптивный дизайн — это всего лишь новейший член длинной линии «ступенек» на пути к созданию доступного дизайна.



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



Даже медиа-запросы выполняются в пикселях, что означает, что он был разработан с учетом «макета» и «идеального пикселя» ПЕРВЫМ, а не правильного подхода «сначала контент» при создании сайта.

Использование пронумерованных заголовков является абсолютной тарабарщиной, так как, ну, у вас ВСЕ они есть как H1... H1 (единственное число) - это заголовок, в котором ВСЕ на странице должно быть подразделом согласно правилам HTML 4/более ранних версий.

У вас было бы только более одного H1, если бы вы использовали структуру HTML 5 с бессмысленно избыточными тегами SECTION или ARTICLE, которых нигде нет в вашем документе с тех пор, как вы перешли на DIV и довольны классами.

И это ДЕЙСТВИТЕЛЬНО имеет неприятный случай «Семантическая разметка, что это такое», смешанная с бесконечными бессмысленными DIV и классами впустую.

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

(это называется ключевыми словами, 7 или 8 слов, которые существуют внутри , по которым вы хотите повысить рейтинг - вы не заполняете его 50 словами, которых даже не существует на странице!), раздутая крушение поезда некомпетентности разработчиков, известная как jQuery, просто ссыт повсюду (не фанат), статический стиль в разметке — неудивительно, что он тратит 35,8 КБ HTML на 1,8 КБ открытого текста и, возможно, дюжину изображений, которые я бы рассматривал как контент — вероятно, в три-пять раз больше необходимого кода.

Тем более массивное выпадающее меню, которое фактически бесполезно на небольших дисплеях, и гигантский средний палец к удобству использования - есть причина, по которой знающие люди ПЕРЕСТАЛИ размещать их на веб-сайтах десять лет назад.

Все эти недостатки означают, что страница не деградирует корректно и не соответствует какому-либо минимуму доступности, который должен быть ЗАДОЛГО, прежде чем вы даже ДУМАЕТЕ беспокоиться о том, отзывчива она или нет.

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

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

Извините, если это кажется резким, но я просто честен с вами, а не приукрашиваю.

Привет, тень смерти, Спасибо за ваш отзыв.

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

Все, что я могу контролировать, — это содержимое каждой страницы; а не то, как страница в конечном итоге компилируется.

Что касается таких пунктов, как «отделение презентации от содержания», какие вещи я могу сделать, чтобы улучшить ситуацию в этой области? Спасибо!

Пара улучшений качества жизни от разработчика ОКР:

 .don8 >a {background:none;}

Код (CSS): требуется «курсор: указатель»; в этом блоке. Кроме того, им необходимо добавить приведенный ниже код в мобильный запрос, чтобы он удалил зеленый фон с кнопки «Дать» в состоянии мобильного меню, он туда не подходит.

сузьте браузер, раскройте «меню», нижняя ссылка — «Дарить» с фоном размером с рабочий стол.

 @media (max-width: 767px) { #mobileMenuButton { display: block; margin-top: 1em; padding: 1em; text-align: center; background-color: #00adbb; color: #fff; text-decoration: none; } }

Код (разметка): Бакс