GM2mars

Не парьтесь, продавайте дизайн на themeforest и все =)

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

var cropDescription = function(text, len) {
	return (text.length >len) ? text.slice(0, len) + '...' : text;
};

Библиотека для лендингов, это что-то новое ))
Вам нужен сервис для генерации лендинга, наберите в поиске, их тьма, возможно будут и бесплатные.

Во всем коде не стал разбираться, слишком много всего. Но у вас вначале (где js в html'e) логика правильная.
Как открыли форму, подписываемся на события клика на документе. При каждом клике выполняем функцию проверки: от event.target проверяем всех родителей на совпадение, например id с нашей формой (отслеживаем кликнули мы в область формы или нет). Если родитель так и не был найдет, то закрываем форму, и не забываем отвязаться от события, чтоб зря функции не гонял.
https://jsfiddle.net/hfuLrpqo/1/

p.s. пример на jQuery

Расположи слой с узором под фото, при наведении уменьшай прозрачность фото.
Вообще конструкция такая

<div class="container><a href="site.ru"><img src="photo.jpg"></a></div>

.container {background: url(uzor.png);}
.container img:hover {opacity: 0.5;}

background: url(icon.png) no-repeat 0 0 transparent;

Какие советы/рекомендации дать веб-дизайнеру для того, что бы сверстать макет можно было максимально быстро?

Найти онлайн генератор html, скормить ему psd и получить готовый шаблон с говноразметкой. Это самый быстрый способ сверстать страницу.

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

input:focus {
  box-shadow: 1px 1px 2px 0 red;
}

:-P

Если кому ещё нужно, вот готовое решение:

var checkIfFlashEnabled = function() { 
	var isFlashEnabled = false; 
	// Проверка для всех браузеров, кроме IE 
	if (typeof(navigator.plugins)!="undefined" && typeof(navigator.plugins["Shockwave Flash"])=="object") isFlashEnabled = true; 
	else if (typeof  window.ActiveXObject !="undefined") { 
		// Проверка для IE 
		try { 
			if (new ActiveXObject("ShockwaveFlash.ShockwaveFlash")) isFlashEnabled = true; 
		} catch(e) {}; 
	}; 
	return isFlashEnabled; 
};

Ну как указал @Trow_eu , 960 рекомендуемая ширина для 1024. Лично у меня бразер занимает всю полезную площадь по ширине, то есть 1920px - скролл когда есть (15px, но по моему в разных браузерах ширина скролла может отличатся).
Я всегда беру за стандарт минимум 1280px по ширине.

Хм, из пункта "2.1.2. Разработать Дизайн..." следует что они должны вам отдать psd (если такого формата исходник). В договоре две услуги: разработка дизайна и верстка с макета этого дизайна, вы оплатили две услуги, они вам "отдали" одну услугу.
Хотя тут вопрос спорный.
Если не отдают исходники дизайна, то скорее всего они его могут (будут) использовать для других заказов и не известно сколько ещё сайтов появятся с "вашим" дизайном. Вторая причина которую я вижу, студия могла просто найти готовый шаблон (особенно если сайт среднестатистический) и у них psd шаблона просто нет.

Есть такая проблема. Ничего умнее не придумал как $('body').stop().animate({"scrollTop": 0}, "fast");
Может кто подскажет более адекватное решение...

Для решений со скролом нужно делать проверку на шаг, при котором будет меняться картинка. Так как событие скрол срабатывает при сдвиге на 1px.
То есть к примеру мы хотим менять картинку на каждые 100px скрола вниз:

var step=100;
$(window).scroll(function() {
    var index = $(this).scrollTop();
    if (index>step) {
      step+=100; //можно и step=index+100 (нужно смотреть что будет лучше)
      (меняем картинку, алгоритм можно любой придумать)
    }
  });

Какую-то конкретную не использую, обычно сам размечаю сетку в зависимости от проекта, со значениями кратными 2 или 5-ти.

Ну если честно, то переход по якорям вас мгновенно перенесет на это место.
Скорее всего нужно получать относительную позицию элемента по Y и скролить с анимацией в это место, типа: jQuery("body").stop().animate({"scrollTop": Y-pos}, "fast");

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

В Firefox Nightly появилась встроенная IDE для веб... - вчерашняя статья с хабра