Ankhena

Нужно ли рисовать мобильную версию:
зависит от
- дизайна
- содержимого
- квалификации дизайнера
- квалификации верстальщика (и возможно сотрудничества дизайнера, чтобы дорисовать какие-то иконки/мелочевки по требованию верстальщика)
- аудитории сайта и % пользователей с мобильников

Делать ли отдельную мобильную версию:
- если контент существенно отличается - ДА
- если нет или скрыты лишь некоторые несущественные блоки - делать адаптивный

Бутстрап
- зло :)

codepen.io/Ankhena/pen/RREzPj

https://greensock.com/draggable

Перестать верстать таблицами (про то что парные теги должны быть парными, промолчу).
Вытащить списки из таблицы.
Сделать им float:left, тогда как только второй перестанет помещаться, съедет вниз.

Другой вариант - любимый flex.

Табы прекрасно делаются на CSS
inferusvv.ru/blog/css/14-taby-s-pomoschyu-css3.html

codepen.io/anon/pen/kXzroX

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

Пожалуйста, сделайте небольшой блочик не мешающий дальнейшему просмотру сайта, а не целое всплывающее окно.
Часто, после того как оно вылезают люди делают 2 вещи: либо просто крестик на всем сайте либо пишут что-то нехорошее в эту форму.
Я понимаю, что владельцам сайта очень хочется получить e-mail, но может быть им все таки больше хочется получить лояльных клиентов?

В основном да.
Уж заголовки точно, хотя бы потому, что так проще, короче и собственный код легче читается.
Написать h1 и к нему h1{}, чем городить дивы с классами.

Непродуманное построение верстки.

1. Чтобы переставлять блоки местами с помощью CSS они должны быть на одном уровне.
Т.е. нужно перестроить HTML, а потом использовать flex order.

2. Другой вариант: news_box_content по высоте делать таким, чтобы в него поместилась и картинка и заголовок и текст. Заголовок прибиваете к его верху, текст к низу, а в образовавшееся пространство позиционируете картинку.
(Не буду писать, что я думаю об этом способе и тех, кто так делает)

3. Ну и еще есть JS, но в данном случае, это тоже не правильно.

Задайте для before и after одну боковую границу вместо фона

Без контекста не понятно что они имели в виду.

1. Все элементы на которые может захотеться кликнуть должны быть кликабельными - ДА

2.1 Тыкать для совершения каких-то действий можно только на <a> - НЕТ

2.2. Все кликабельное нужно делать с помощью <a> - НЕТ

1. CSS tabs
inferusvv.ru/blog/css/14-taby-s-pomoschyu-css3.html
2.
.toggle()
http://jquery.page2page.ru/index.php5/Поочередное_...

У блока меняется position на fixed, он перерисовывается или перепозиционируется (как правильно по браузерной механике?)
Вот и "прыгает".
Если прокрутку медленно тянуть мышкой то скачок менее заметный, если прокрутка колесиком, то более.

Прямо так "протереть", боюсь, не получится. Можно сделать вид:

наложить на текст изображение аналогичное фоновому
css.yoksel.ru/css-and-svg-masks

Портфолио - это Ваши работы. Что потом с ними сделал заказчик это уже отдельная история.

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

Но (!) в договоре есть строчка, что имею право выкладывать работы в портфолио.
Если заказчик заранее попросил этого не делать, то естественно такие работы никуда не идут.

Еще может быть несколько типов портфолио: публичное и приватное. Т.е. то, что лежит в открытом доступе или то, что показываю при встрече или по запросу.

Как правильно вынести header и footer во внешний файл в HTML шаблоне?

Тег? Ну какой хотите :) Самый простой это div.

Прокрутка только по вертикали:
overflow-y: scroll;
htmlbook.ru/css/overflow-y