Приемы прогрессивного улучшения [закрыты]

Question

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

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

(Я много знаю о javascript и хитростях браузера, но признаю, что ничего не знаю о flash и т.д.)

Редактировать:На самом деле я не говорю о 1% сайтов, являющихся RIA, которые просто не могут функционировать без javascript или flash.Я не спрашиваю, как писать Google Docs без js.Я хотел бы знать, что люди делают для сайтов, которые может делайте классные вещи, но на самом деле не потребность Для.

Я предложу пару своих собственных в качестве ответа...

Answer 1

Я стараюсь избегать мантр, за исключением мантры о том, что мир - это беспорядочное место.

Я думаю, что большая часть функциональности настольных компьютеров будет заменена веб-функциональностью, и это будет непростой переход, который в конечном итоге приведет к появлению реальных приложений в браузере.Реальные приложения означают JavaScript, или Flash, или Silverlight, или Java, или C #, или Objective-J, скомпилированные в JavaScript.

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

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

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

Answer 2

Некоторые из изящных приемов, которые я использую для работы с сайтами на основе ajax:

1) Напишите всю страницу и все ссылки, используя обычные теги a, которые перейдут на нужную страницу с отключенным javascript, затем "перехватите" их на основе чего-то вроде "rel= external".

2) Добавьте теги noscript с альтернативным содержимым в любом месте, где javascript в противном случае вставлял бы динамическое содержимое.

3) Скрыть элементы, которыми javascript будет управлять при загрузке DOM, с помощью javascript вместо того, чтобы скрывать их в таблице стилей и позже показывая их с помощью javascript, так как пользователь никогда не сможет их увидеть, если у него отключен javascript.

Answer 3

Проверьте свою статистику (или установите Google Analytics если у вас нет статистики) и определите, куда идут ваши пользователи и что они на самом деле делают.

например ,

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

2.) Предоставляет ли ваша страница 404 какие-нибудь быстрые варианты поиска по родственным терминам или попробуйте "угадать", что они искали?

3.) Есть ли на вашем сайте карта сайта, которая обеспечивает быстрый доступ к значимым разделам вашего сайта?

4.) Если ничего другого не получается, есть ли у пользователя простой способ связаться с вами / службой технической поддержки, чтобы помочь ему найти то, что ему нужно?

5.) Не уверен, что вы "продаете" что-то на своем сайте, но похоже на то, когда вы подходите к кассе в любом крупном магазине bricks n morter...они спрашивают вас, нашли ли вы сегодня все, что искали.Рассмотрите возможность предоставления опции, при которой пользователи могут вносить предложения...возможно, у вас есть неиспользованный рынок, ожидающий завоевания.

6.) Что касается удобства использования, обязательно просматривайте свой сайт в IE (6,7,8), Safari и т.д.и убедитесь, что это работает везде, о чем вы заботитесь.

7.) Есть замечательная книга под названием "Не заставляй меня думать" это отличный ресурс по реалистичному использованию.Если вы этого еще не читали...иди, возьми копию.

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

Answer 4

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

Тем не менее, есть несколько хороших стартовых блоков:

Шаблон PRG обычно это необходимо для хорошей доступности.

Вы хотите убедиться, что рядом с началом вашего HTML-кода есть меню с поддержкой jumplink.Если вы не уверены, попробуйте запустить свой веб-сайт в разделе "Ссылки" или в аналогичном текстовом или речевом браузере.Если вы будете раздражены, то же самое сделают и ваши доступные пользователи.

Убедитесь, что вы применяете теги alt к своим изображениям только тогда, когда они имеют смысл.Допустимо указывать изображение alt="", когда оно предназначено только для целей дизайна.Аналогично, установка title="" удовлетворит потребности пользователей Firefox во всплывающих подсказках при наведении курсора мыши, не раздражая доступных пользователей.

Надеюсь, эти простые советы помогут!Доступность - это ответственность каждого!

Answer 5

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

<video>
    <source src="video.ogv" type="video/ogg" /><!-- OGG for Mozilla/Opera -->
    <source src="video.mp4" type="video/mp4" /><!-- h.264 for Apple/Google -->
    <object><!-- Fall back to Flash/h.264 for older browsers -->
            <!-- And in the event the UA can't handle any of those, all you can do is provide a link to the media -->
            <p><a href="video.ogv">Download the video</a>.</p>
    </object>
</video>

[Псевдокод, но вы уловили идею]

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

Answer 6

Прогрессивное улучшение не является сложным.

Рассмотрим три основные проблемы:

• Контент (HTML)
• Презентация (CSS)
• Поведение (JS)

Вы начинаете с содержания и прорабатываете проблемы по своему усмотрению, следя за тем, чтобы каждая новая проблема не мешала предыдущей и не пыталась имитировать другую проблему;JavaScript не должен генерировать контент;CSS не должен обрабатывать поведение;HTML не должен обрабатывать презентацию и т.д.и т.д.

Answer 7

хорошо, когда дело доходит до приложения типа веб-сайта, лучше всего всегда поддерживать множество форматов в Спокойный образом ...HTML, XML, JSON, RSS, Atom (где это имеет смысл) и почему нет других ...для этого вам нужна чистая архитектура MVC на сервере ...ну, это не обязательно должен быть MVC, но, скажем, уровень рендеринга должен быть тупым, как хлеб, и под ним должна работать хорошо написанная бизнес-логика ...ваш контроллер интерфейса должен выбрать правильный формат для возврата в ответ на запрос , и все готово ...вся ваша бизнес-логика для извлечения / обновления данных, разбиения на страницы и т.д.реализуется один раз, а затем вы просто визуализируете его в HTML-шаблоне, или конвертируете в JSON, или делаете что угодно ...

теперь идея состояла бы в том, чтобы создать реализацию one view, которая возвращала бы надежный, семантический и простой HTML ...и создайте такой, который будет интенсивно использовать javascript ...сделайте их доступными по разным путям и сделайте javascript недоступным для сканирования ...поместите одну строку javascript в начало вашего основного HTML-шаблона, что вызовет перенаправление на javascript-версию этого сайта ...вы можете сделать то же самое и для flash ...и т.д....затем, в "грязной" версии приложений, вы можете делать действительно все, что вам нравится ...загружайте шаблоны по протоколу HTTP, а затем данные в формате JSON и выполняйте рендеринг на клиенте, создавая постоянное клиентское javascript-приложение с сохранением состояния ...почему бы и нет?

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

приветствие

back2dos назад 2dos