jtyjty99999的博客

指尖的流畅体验

为了建立完整的体验,我们将 Flipboard 带到 web 端。我们在 Flipboard 所做的,在每台用户使用的设备上都拥有独立的价值:整理那些来自你最关心的主题,来源以及人的最好的故事。因此把我们的服务带到web端,也是一个合乎逻辑的延伸。当我们开始这个项目后,认识到我们需要把源自移动体验的思考搬到 web 端,试图提升 web 端的内容布局和交互。我们想达到原生应用般的精致和性能,且仍能感知到真实的浏览器。

CSS Shapes 101

方块套方块:这是我们网页一直以来的样子。通过使用CSS,我们一直试图摆脱这种创建几何形状的限制,但这些形状没有影响形状内的内容,或者与页面其他元素相互影响。由Adobe在2012年中期提出的新的CSS shapes 规范 改变了这一现状。它的目标是为web设计人员提供一种新的方式,来使内容流入或者环绕在任意复杂的形状上——除了使用javascript,我们从来不曾做到这点。

使用CSS Shapes的Regions创建更好的阅读体验

使用CSS shape我们可以使内容“流向”非矩形区域。有时我们希望能够把内容填充到一个元素中的多个不同形状的区域内。如果你读过我之前的文章,您会知道,这可以用CSS形状,使用一个图像,这个图像用alpha透明度定义了多个形状,让浏览器提取内容并浮动到区域上。我们可以发挥创意定义形状,使文本流入多个区域,不过这样很容易地使内容几乎完全丧失可读性。

当CSSshape会造成一个严重的可访问性问题时,不推荐使用。我们乐于使用各种创造性的布局与自定义形状,但最应该让我们铭记的是,内容是可读的,所以设计师设计吸引人的布局时,必须考虑可访问性和可读性。

为了更好地说明这一点,我们看一个例子,这个例子中CSS shape会导致非常糟糕的阅读体验。事实上,这不是CSS shape造成的,这是设计师的决定。

Css3 Regions如何工作?

在Web页面中布局要做到类似于报纸和杂志那样的生动,自由。对于任何前端人员来说都是一件头痛的事情。而偏偏很多时候设计师碍于前端人员无法实现,而不能更好的自由发挥其创意。为了使页面布局更加灵活到如印刷媒体一般,一个新的CSS3模块出现了——CSS3 regions。相比通常的在多个元素中放置内容,此模块允许内容流在页面的指定区域(regions)放置。让我们看看这个模块是如何工作的。

让手机站点像原生应用的四大途径

在移动设备上构建设计良好的网站慢慢变得越来越容易。不论使用什么方法(响应式设计、自适应等),如果你了解你所做的,创建一个美观的网站不是问题。但你的用户可能仍然要求网站有原生app的体验。完成这样的体验是一个挑战。大多数时候,当人们谈论“app”或“原生”的感觉,他们讲的的不是一个网站的视觉体验。他们所讨论的,是用户界面如何对他们的行为进行反馈,以及这种反馈是怎样呈现的。99根据Kyle Peatt的《A Beginner's Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App》所译,带大家一起体验让手机站点像原生应用的四大途径。

让你的网站在移动端健步如飞

最近一项 研究表明,80%的网民对移动端的浏览体验感到失望,同时,当体验提升时,他们会在智能手机上花费更多的时间。这不奇怪,因为64%的智能手机用户希望网站可以在4秒内加载完毕,但一半的网站花费了二倍以上的时间,达到了9秒。这篇文章会阐述一些可以使你的网站在移动端跑得更快的技术。99根据Johan Johansson的《How To Make Your Websites Faster On Mobile Devices》所译,向大家介绍如何让你的网站在移动端健步如飞。

HTML和CSS高级指南之三——丰富多彩的选择器

你要美化Web页面,你就需要选到相应的Web元素,如何选择相对应的元素,这样的工作都是由CSS的选择器来实现,因此说,CSS选择器不第二重要,没人敢说第一。99根据Shay Howe的《An Adavnced Guide to HTML & CSS》第三课《Complex Selectors》所译从六个部分解说CSS的选择器,可以说面全,种类多,值得一读。

HTML和CSS高级指南之一——性能与架构

架构和性能在Web上谈得是越来越多,争论的也越来越多,那究竟如何可以在平时编码时候就注意这些细节,提高自己代码的质量,编辑高性能的代码呢?这个答案很多同学都想知道,那么今天由99根据Shay Howe的《An Adavnced Guide to HTML & CSS》的第一课《Performance & Organization》所译,给大家详细介绍了如何组织HTML和CSS,制作一个优秀的架构,并介绍了如何对网站代码进行优化,提高站点的性能。

此像素非彼像素

本文由99根据Patrick H. Lauke的《A pixel is not a pixel is not a pixel》所译,主要介绍了Viewport方面的知识。99根据原文进行翻译,另外添加了许多自己从外面搜集的资料进行分析,从而解决了很多Web前端人员所不知道的——viewport对Web开发者会有什么影响。实属于干货系列,很值得一读。

你应该知道的一些事情——CSS权重

CSS的选择器对于一个前端人员来说是一个很熟悉的东西,她是CSS中很重要的一部分,早前在整理CSS3系列教程时,特意将CSS3的选择器CSS的选择器做了一个总结,《CSS3基本选择器》《CSS3属性选择器》《CSS3伪类选择器》《CSS选择器优化》。这样一来对选择器算是做了一个系统的学习与整理,但是对于CSS选择器权重一直没有做过太多的深究,总认为他是一个难啃的骨头。这次99根据的《CSS Specificity: Things You Should Know 》文章整理了一篇译文,值得大家认真阅读。文章中对CSS选择器权重做了深入的介绍,并且附上很多相关的文章介绍。感兴趣的同学可以花点时间看看,你不会后悔的。

页面

返回顶部