你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
only

直邮多端适配解决方案浅析 6个回复 专栏 @ HTML

only 发布于 2 年前

多端适配越来越成为一个产品或者页面的标配,作为运营和消息推送的一个重要的载体-直邮的多端适配一直没有比较好的适配。随着邮箱类的APP的收信份额的进一步提升,我们也尝试着去做一些直邮方面多端适配的方案。

目前主要有方案:

A:定宽缩放大法。这个是目前APP适配直邮最常用的方法

  • 优点:可以使比较多的直邮可以在缩小的情况下面直接展示
  • 缺点:由于部分文字或者图片被缩小,导致无法直接查看或者查看起来比较心累,导致运营或者消息推送的质量降低。但可以人为放大缩小

B:URL转移大法。这些一般被用户比较多的私密性推送直邮里面

  • 优点:可以通过直邮中的链接直接去对应的页面,只要对页面进行比较好的适配,基本完美解决直接缩小的痛点
  • 缺点:对于一些产品展示类的话比较不友好

C:纯文字的堆积法。

  • 优点:能比较好的适配移动端,不用放大和缩小
  • 缺点:载体比较单一,基本不符合运营推广,或者多图的消息推送

在了解了前人的肩膀后,我们开始了我们的多端适配的方案。主要以C为自己的基准,借鉴了A的部分想法,进行一些图片的适配等。

D:傻瓜式等比缩放大法 (http://jsfiddle.net/onlychild/5owjghug/)

区别于上面A的定宽缩放,我们将其改为百分比,再借用了css3中min-widthmax-width来限定其最大最小的宽度,额外针对一些比较低版本的ie浏览器的话可以采用hack的方法直接限定其宽度大小。从而形成里此大法。

它适用于一些上下排布的直邮,对整体邮件的格局有比较大的限制,在信息展示量上的优点浪费

Alt text

E:乾坤大挪移大法 (http://jsfiddle.net/onlychild/mbpj7qfr/)

随着运营的需求的增加,原本一行单列的略显在布局上的浪费,被运营大大逼的去往多行多列的方向做了一些预研。

直邮的制作以table为主,所以在table上面功夫去做这块相对比较麻烦,但是又要避免去用一些风险比较高的css样式,所以走了不少的弯路。

和前面几种完全不一样的是此法融合傻瓜式D的一些缩放方案,转而嵌套更多层的table,为了保证单列上的样式不会因为变化,所以我们在单列采用了table去固定内部样式,除此以外,可以给table加上display:inline-block;的样式属性,通过行内元素的一行的性质就基本满足了在pc端的一些显示效果,也可以满足一行多列的需求,此外在移动端,由于外宽度减少从而使不满足一行的下移,在父层加上text-align:center;的样式使其居中,从而达到多端适配的目的。

此外可以很好的避免信息展示上面的缩小的问题,符合了运营的同学的最初的要求,在信息层级展现上也比较好的符合多端的习惯(PC左右,APP端上下)

Alt text


写在最后:

各种大法甚好,我们也尝试着去摸索一些新的大法。但是话又说回来,最好的不一定是最合适的,最合适的才是最好的。在目前的项目中,我们也没有完全将E乾坤大挪移大法适用到我们所有的项目直邮中去,更多的判断和选择,量体裁衣。目前我们将直邮分为3种,1.急于推广的时效性性强的临时直邮,我们会采用大法A,对于消息推送类或者日常运营类的直邮我们会尝试着去用大法E去做。

这次介绍的两大法D/E可以比较好的适配到多个常用的平台-ie7+等PC浏览器,邮箱大师,QQ邮箱,foxmail,mac自带邮箱,outlook等。不排除有遗漏,但是基本符合趋势

  • berg

    专栏权限送上,不过,格式应该要改漂亮一点,现在这个有点乱诶

    #1
  • only

    确实在布局方面比较low~已修正

    #2
  • only

    @berg 多谢提醒

    #3
  • berg

    文章写得挺好的,很多公司在做邮件运营的时候,做的页面都比较粗糙,在手机上面查看很不方便

    尤其是,尤其是信用卡账单!!!

    每次用手机看账单痛苦死了

    #4
  • 06wj

    only大大v5

    #5
  • zerob13

    膜拜O总。

    #6
登录后回复,如无账号,请使用邀请码注册