Хабр, давай пофиксим листа?

Привіт.

В черговий раз отримавши лист від хабра, я засмутився. А справа ось в чому. На скріншоті зліва ми бачимо нормальне адаптоване лист. Так воно відображається у всіх осудних мобільних клієнтах, які підтримують media queries. Тепер давайте поглянемо на скрін праворуч. Таким лист ми бачимо в мобільних Gmail, Yandex, Mail.ru клієнтів як на андроїд, так і на яблучку. Як ви можливо вже здогадалися, ці клієнти media queries не підтримують.





У випадку з хабром задача проста до болю. Нам потрібно відмовитися від медиазапросов на користь банальної гумової верстки з шматочками магії. Давайте уявимо, що поточне лист хабра — це #NEWSLETTER# для спрощення сприйняття коду.

Насамперед розглянемо обгортку листи в її поточному вигляді:

<div style="border:0;padding:0;margin:0;background-color:#fff;font-family:'PT Sans',Helvetica Neue,Helvetica,Lucida Grande,tahoma,verdana,arial,sans-serif;text-align:center" bgcolor="white">
<div style="background-color:#fff">
<table align="center" width="624" cellpadding="12" spacing="0" style="border-collapse:collapse">
<tr>
<td>
#NEWSLETTER#
</td>
</tr>
</table>
</div>
</div>


Давайте позбавимося від сміття:

<table align="center" width="624" cellpadding="10" spacing="0" style="border-collapse:collapse">
<tr>
<td>
#NEWSLETTER#
</td>
</tr>
</table>


Вже набагато краще. А тепер давайте зробимо обгортку адаптивної:

<style>
body { margin:0; }
@media only screen and (min-width: 600px) {
.wrapper { width:600px !important; }
/* встановлюємо ширину обгортки в 600px для десктопів, які підтримують медиазапросы */
}
</style>
<!--[if gte mso 9]>
<style>
.wrapper { width:600px !important; }
/* встановлюємо ширину обгортки в 600px для Outlook */
</style>
<![endif]-->
<!--[if lte mso 9]>
<style>
.wrapper { width:600px !important; }
/* встановлюємо ширину обгортки в 600px для Outlook */
</style>
<![endif]-->
<table class="wrapper" align="center" width="600" cellpadding="10" spacing="0" style="border-collapse:collapse; margin:auto; width:auto; max-width:600px;">
<tr>
<td>
#NEWSLETTER#
</td>
</tr>
</table>


От і все. Яку вигоду ми з цього витягли: лист адаптована під всі мобільні поштові клієнти без винятку, єдине за чим необхідно стежити — це відсутність всередині обгортки елементів, які перевищують 280px(300 мінус 10*2px відступ обгортки) по своїй ширині. Всередині тільки гума. А так само для кожного текстового блоку повинна бути div обгортка з форматуванням тексту.

Тим не менш у всій цій схемі є один маленький косяк. the Bat! не підтримує max-width, хакі, винесені стилі і медиазапросы. Тому в цьому поштовику наш лист буде у всю ширину поштовика. Погодьтеся, це невелика жертва порівняно з адаптацією трьох мобільних клієнтів? Тим не менш, якщо раптом хто-небудь запропонує робоче рішення, отримає від мене бонус.

Суб'єктивний пост скриптум: розмір шрифту в листі занадто великий. На десктопах виглядає нормально, але на смартфоні віджиратись багато вільного місця. Достатньо зменшити розмір заголовків топіків до 16px і буде цукерка. Додаю скрін десктопної версії листа для тих, хто не в курсі як воно виглядає.



Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.