博客

2016 最流行的 CSS Reset 解决方案

CSS Reset是什么?

在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。

 

为什么要重置它?

因为浏览器的品种很多,每个浏览器的默认样式也是不同的,比如<button>标签,在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的,所以,通过重置button标签的CSS属性,然后再将它统一定义,就可以产生相同的显示效果。

 

目前最流行的5种解决方案:

Eric Meyer’s “Reset CSS” 2.0

CSS Web 标准专家 Eric Meyer 的解决方案,发布于 2011.01.26。

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

阅读全文

标准
博客

2016年最值得关注的16个网页设计趋势

设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步褪变成为主流。作为一个专注于网和平面设计的设计机构,我们对于所有相关的技术和设计趋势都极度敏感。通过过去一年的观察,我们可以总结出下面16大设计趋势。

web-design-predictions-2016-1

1. 可用性设计

2016年,设计的大方向将继续向着用户倾斜。用户体验在整个设计中的权重将继续加大。如果你的设计在可用性上不足的话,再炫酷也不会有人问津。

如果不能专注地做好用户体验设计,在即将到来的2016年,你是无法持久地吸引用户的。无论是谷歌在算法上的变更,还是用户行为数据的变迁,都指向同一个方向:你的网站必须加载得更快,也必须更加易用。

阅读全文

标准
博客

2015年16个最佳的免费响应式HTML5框架

HTML5框架是一类有助于快速轻松创建响应式网站的程序包。这些HTML5框架有着能减轻编程任务和重复代码负担的神奇功能。关于免费的HTML5框架,种类繁多,并且大多很受欢迎,因为它们能够允许我们用更少的时间和精力去创建一个令人惊艳的网站。

下面这些既是响应式的HTML5框架,又跨浏览器兼容。而且这些免费的HTML5框架非常轻巧,所以不会拖累你网站的速度。感兴趣了吧,那么下面,我将为大家隆重揭晓2015年16个最佳的免费响应式HTML5框架!

1)Twitter Bootstrap

Bootstrap是最流行的HTML5框架之一。这是一款用于Web开发的时尚、直观、强大的前端框架。它有着用于开发响应式网站的所有组件,如12列响应式网格、定制jQuery插件、bootstrap编辑器等等。

HTML5-framework-1

官方网站:http://twitter.github.io/bootstrap/

阅读全文

标准
博客

五条简单的阅读规则:100% Easy-2-Read

五条简单的阅读规则

1、长文本使用标准字号。用户不想点击“放大”、“缩小”按钮,也不想更改浏览器的设置。用户想马上就开始阅读,希望你能适应我的设置,而不是反过来让我更改设置来适应你;

2、主动留白。在文本周围留出足够的空间可以减少阅读时的压迫感,因为这样读者更容易将焦点集中在内容本身;

3、友好的行高。HTML的默认行高过小。如果你增加一些行高,文字会更具易读性。140%标准行高是一个不错的标准;

4、鲜明的色彩对比。这一点我觉得没必要多做赘述了,但过于强烈的对比(纯黑纯白)也不合适,因为这样看上去会使人感到文字在闪烁。一个建议的标准是:背景颜色#fff,文字颜色#333;

5、别把文字做成图片。在进行阅读的时候,我希望能够搜索、复制和保存文字,并使用光标来进行标记。把文字做成图片看起来很美观,但是美观并不是网页所要的全部。

网页是用来进行交流和信息传达的,而信息需要具有良好的可读性、可用性、可伸缩性,方便进行引用和分享。

标准
博客

与用户体验相关的五大新趋势

普通用户的习惯有所改变,不再是单一的寻求用来分享时间的社交网络,而是想要更深度、与现实结合的体验,这比产品更重要。所以市场营销者有必要了解下面五个于用户体验有关的趋势。

1. 视觉化思考

图形交流首先出现在教育系统,目的是提高教学和记忆效率。近些年这项技术的发展,使得市场营销者和公司能将其用于解决不同领域的复杂问题,并给出图形化的方案。

Group Partners是一家典型的视觉化服务公司,通过它提供的程序,客户能和与这个公司协作完成视觉化解决方案。创始人John Caswell表示,“这其中蕴含的逻辑结构将迅速转变用户思考和行为习惯。”

目前这家公司已经有超过2500个用户,包括可口可乐、劳斯莱斯、BBC等。 阅读全文

标准