Действительно ли это верно, что новостные рассылки в HTML должны иметь “основанные на таблице” разметки?
Я получил это работает. Я преобразовал компонент функции в компонент класса, и теперь он работает так:
import React, {Component} from 'react';
class EditSocialmedia extends Component {
constructor(props) {
super(props);
this.state = {
facebook: "",
youtube: "",
twitter: "",
focusedElement: React.createRef()
};
}
render () {
const {facebook, youtube, twitter} = this.props.social
return (
<div>
<h2 className="hSmaller hthin">Social Media</h2>
<input id={`facebook`}
className={this.refFacebook === this.state.focusedElement ? "active" : ""}
ref={(input) => this.refFacebook = input}
value={facebook ? facebook : ""}
onChange={() => {this.setState({facebook: this.refFacebook})}}
onFocus={() => this.setState({focusedElement: this.refFacebook})}/>
<input id={`youtube`}
className={this.refYoutube === this.state.focusedElement ? "active" : ""}
ref={(input) => this.refYoutube = input}
value={youtube ? youtube : ""}
onChange={() => {this.setState({youtube: this.refYoutube})}}
onFocus={() => this.setState({focusedElement: this.refYoutube})}/>
<input id={`twitter`}
className={this.refTwitter === this.state.focusedElement ? "active" : ""}
ref={(input) => this.refTwitter = input}
value={twitter ? twitter : ""}
onChange={() => {this.setState({twitter: this.refTwitter})}}
onFocus={() => this.setState({focusedElement: this.refTwitter})}/>
</div>
)
}
}
export default EditSocialmedia;
12 ответов
Если вы хотите, чтобы ваше HTML-письмо хорошо выглядело в большинстве почтовых клиентов, вам следует написать свой HTML-код в том виде, в каком он был в 1999 году :)
I'd highly recommend paying a visit to the Email Standards Project website. It lists almost every major email client (both standalone and web-based) on the market and outlines how much HTML support is built into each one.
Also check out Campaign Monitor's email design guidelines for some practical guides for proper HTML email building -- including, sadly yes, "use tables."
Это, вероятно, больше основано на реальности рендеринга почтового клиента (что ужасно), чем на чем-либо еще. Технически это почти наверняка неверно, но прагматически это может быть лучший совет. Труппо касается этого.
Определенно нет стандарта, который обязывает это делать, и на самом деле передовой опыт диктует, что таблицы не должны использоваться для компоновки (за исключением случая компоновки табличных данных).
Есть аргумент должны быть созданы для использования таблиц в презентации, поскольку нет гарантии, что множество настольных и веб-почтовых клиентов будут правильно отображать презентацию на основе CSS ... Однако я бы не сказал, что это аргумент сам по себе.
Я не буду советовать вам это делать, но вы, вероятно, слышали это, потому что многие программы чтения электронной почты поддерживают только несколько HTML и CSS. Они часто не включают полный анализатор html / css, а в прошлом таблица часто использовалась для макетов ..
Мне бы понравился мир, в котором никто не ожидал, что HTML будет использоваться вместо обычного текста, но это не та ситуация. Если ваша работа состоит в том, чтобы придумать HTML, который не будет вас смущать, когда ваши подписчики попытаются просмотреть его в своих любимых почтовых клиентах (приложениях или электронной почте), трудно придерживаться семантической разметки и CSS.
Take what Я говорю с недоверием, потому что я делал это только в качестве учебного упражнения, а не профессионально. Судя по статье, которую я добавил в закладки, и дальнейшим ссылкам, которые я нашел в этой статье, на следующих страницах, кажется, хорошо обсуждаются реальные проблемы, связанные с отправкой электронной почты в формате HTML.
http://www.sitepoint.com/article/code-html-email-newsletters/
http://www.sitepoint.com/article/principles-beautiful-html-email/
Вы можете посмотреть на это, хотя это конкретно касается описанной поддержки подмножества Oulook html / css:
Таблицы используются по двум причинам:
- Электронная почта в формате HTML может отображаться в огромном количестве клиентов с самыми разными возможностями. Это все равно, что пытаться создать веб-сайт для каждого браузера, а затем умножить его на 10.
- Довольно много клиентов электронной почты портят CSS-макет.
Я обнаружил, что в Outlook возникают проблемы с макетами на основе div.
Мы проводили с клиентами несколько тестов, чтобы узнать, как информационные бюллетени выглядят на их компьютере, и обнаружили, что большинство из них использует макет в Outlook или в почте, который показывает ширину всего около 45 символов. Они не утруждают себя двойным щелчком, чтобы открыть письмо в новом окне или прокрутить его. Письма с некоторым содержанием, отличным от логотипа и текста, которые выглядели несколько лучше, были только с одним большим GIF ...
+1 по совету Campaign Monitor. Я также видел много отличного контента от Эммы . По моему опыту, чем проще вы можете сделать шаблон рассылки, тем лучше. Это верно вдвойне в мире, где все больший процент пользователей читают ваше сообщение на мобильном устройстве с маленьким экраном.
В прошлом было обычным делом использовать таблицы для макета страницы, и многим людям, которые создают страницы, все еще удобнее делать это таким образом.
Как говорит Джеймс, лучше всего использовать Средства позиционирования CSS для макета страницы, за исключением случаев, когда это фактически табличные данные; но лично мне часто бывает трудно получить желаемые эффекты с помощью CSS.