Самый быстрый метод изучения веб-дизайна для разработчика

Question

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

Моя точка зрения на HTML / CSS заключается в том, что это потрясающе работает. Существует слишком много специфических для CSS и браузеров ошибок / извращений, чтобы их можно было запомнить и запомнить, не тратя при этом много времени на попытки распутать все. Есть ли быстрый путь получения CSS в моем мозгу? Я смотрел на некоторые книги по CSS, но для меня они действительно читали длинные списки того, как правильно отображать вещи в IE6 и как округлять углы. (Серьезно, почему требуется так много уловок, чтобы сделать крутой поворот? На любой платформе, кроме Интернета, это можно назвать серьезным упущением.)

Существует ли что-то похожее на CSS, которое jQuery делает для JavaScript? Используя jQuery, вам не нужно хорошо знать JavaScript, чтобы все работало.

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

Answer 1

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

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

Если вы расстроены, потому что что-то работает в Firefox и Chrome, но не в IE (это часто случается), не сдавайтесь. Я нахожу проклятием имя Билла Гейтса, и все, за что он выступает, - это отличное средство от стресса. : -)

Отличным инструментом, который мне нравится использовать, является Firebug , плагин для Firefox, который позволяет вам, среди множества других вещей, редактировать правила CSS в браузере и видеть результаты, как только вы это сделаете это.

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

Answer 2

Да, есть CSS-фреймворки, которые являются «jQuery of CSS». Некоторые из наиболее популярных из них включают 960 и Blueprint . Я лично использую 960 и обнаружил, что из макета уходит много догадок.

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

Другая трудность заключается в том, что применяемые методологии или рабочий процесс действительно могут отличаться между людьми. Некоторые люди сначала делают макет в Photoshop, а затем производят точный попиксельный «рендеринг» с помощью HTML / CSS. Другие используют Photoshop, Illustrator или другой инструмент для простого наброска и идеи, а затем воссоздают его с нуля в HTML / CSS. И все же другие предпочитают начинать непосредственно с HTML / CSS и просто с нескольких эскизов. Выяснение того, какой из этих методов подходит вам лучше всего, является важной частью головоломки.

Answer 3

Это в значительной степени требует времени и практики. Но вы можете избавить себя от многих проблем, если будете поддерживать чистоту и понятность HTML-кода. Вот несколько правил, которые я могу придумать, которые помогли мне:

• Используйте DOCTYPE на ваших html-страницах, начните с переходного, так как он имеет самые слабые правила, и проверьте ваш html. Если вы будете держать свою страницу в стандартном режиме, а не в режиме причуд, у вас будет значительно меньше проблем по всем направлениям.
• Выберите, какие браузеры вы будете поддерживать на ранних этапах, и поддерживайте их в логическом порядке. Для меня, я разрабатываю в Firefox, а затем убедитесь, что все хорошо на Chrome / Safari. IE может использовать специальный вид комментария, который позволяет вставлять html, видимый только для IE. Используйте это, чтобы добавить таблицы стилей для IE7, а затем IE6 для переопределения стилей и устранения проблем с отображением в этих браузерах. Как правило, вы должны сначала начать с лучшего браузера и вернуться назад.
• Будьте осторожны с прокладками. Это одно из самых проблемных свойств, с которыми я сталкивался. Когда вы можете, выберите маленький субконтейнерный элемент с полем вместо отступа. Это больше разметка, но маржа обрабатывается гораздо лучше во всех браузерах.
• Абсолютно позиционированные элементы внутри относительно позиционированных элементов. Это решает много. Когда вы относите положение элемента, он остается в нормальном потоке. Когда вы относите элементы абсолютного положения внутри родительского элемента, который является относительным, абсолютные элементы работают в отношении местоположения родителя.

Answer 4

Подпишитесь на css-Discussion , поиграйте с общими проблемами и поговорите с другими людьми о вашем прогрессе wiki тоже очень полезный ресурс.

Answer 5

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

[или вы можете найти лучших графических дизайнеров для работы]

Answer 6

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

Все, что я могу предложить, это учиться по ходу дела. Вам нужно много опыта!

Или вы можете отказаться от поддержки IE7 и особенно IE6. Если вы сделаете это, вы найдете очень очень немного и очень очень редкие причуды:)