响应式Web设计需要不一样的设计思路:针对内容进行设计而非设备

一个成功的 web 设计源自精雕细琢。但当进行响应式 web 设计(Responsive Web Design ,RWD)时候,我们会发现针对普通 web 设计的经典方法已无法适用了。 有趣的是响应式 web 设计其实是一种 web 设计的倒退。

【译文】合理设置响应式设计的响应点

你可以轻易找到许多如何设置响应式设计响应点的攻略,但是这些过时的设计方法都是以主流屏幕尺寸为依据的,效果并不理想。其实并没有“主流”屏幕尺寸这一概念。另外一个主流的方法是当布局被打破时设置响应点。这个方法听起来好一些。但是仍有疑问,我们怎么判断是否布局被打破了呢?其中一个合理回答是依照经典可读性理论定义响应点。

响应式网页设计

概念 响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式;我们应当向下兼容、移动优先。

君子性非异也:跨平台前端利器Koala

越来越多的同学开始使用less/sass等预处理器的方式来编写CSS与JavaScript,很大程度上提高了工作效果,但编译文件是个繁琐的事情,使用命令行的方式操作起来很累,目前也已经有一些图形工具,比如mac下的codekit, windows下有winLess、simpless等。

追寻点击愉悦感—提升网站平板体验的6个技巧

 译者注:随着平板电脑市场的迅猛增长,你可曾考虑到网站在平板上的用户体验?本文给出了6个提升网站平板体验的简易技巧,让你花小气力,出大成果,可谓事半功倍。要不你试试看。

致那些终将流行的响应式网页设计(附案例)

如今,web应用已经深入到我们生活的方方面面了。而你知道吗?72%的用户们都希望他们访问的网站不仅在台式机或笔记本上有赏心悦目的界面,同时也能适应移动设备的屏幕。为此,身为设计师和工程师的我们必须紧抓这个潮流,走在前沿。

CSS 与 HTML5 响应式图片

随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢?

PC、iOS、Android等多平台通用性交互设计思考

作为一名普通用户,吐个槽先~ 虽然不是5岁的美国小萝莉,不过我还是受够了各种操作平台的分类,以及浏览一个网站或者使用一款产品要学多个版本的行为!!各种PC版、iPhone版、iPad版(所谓的HD)、Android版… 我想说,版你妹呀…

谈谈Mobile Web App的设计方法

Native App与Web App的争论从未停息过,尽管很多人在批判Web App的各种不是,但也阻止不了各种各样的Web App如雨后春笋般出现,尤其是伴随智能手机的普及而受到重视的Mobile Web App。这是一种在非议声里成长起来的产品形态,无论其结果如何,都应该吸引开发者和设计师的关注。

利用media query让背景图适应不同分辨率的设备

随着上网方式的多样化,用户选择上网的工具不再仅是PC,而可以是手机,或者平板电脑。随之而来的问题是如何让网页适应不同分辨率,这给前端工程师们带来了新的挑战,其中重要的一点是如何让图片能在不同的分辨率下都能给用户带来良好的用户体验?

使用 viewport meta 标签在手机浏览器上控制布局

什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。

移动网页设计相关原则

如何开始移动设计 对于我们中很多人来说,移动端设计是一个崭新的机会。但是,如果你过去是桌面端的网页设计师,如何将经验转换到移动网页端呢?当然,已有的一些工具,经验,技能仍然适用,只需开始思考下如何在手机上进行组织和布局。 

HTML5与Web APP浅谈

伴随着移动设备的快速崛起,App市场的发展也日渐迅猛,目前iOS和Android平台的App数量总和也达到100万款之多,据AAWP报道,Windows Phone的应用市场数量已突破8万,晋升成为第三大应用平台。移动数据分析公司Flurry在2011年App趋势报告中显示,人们花费在App上的时间已经超过人们浏览网页的时间。

响应式网页设计

响应式网页设计,这个概念在国外相当火热。不管是交互设计,视觉,前端开发都投入到这个老意识新概念的技术当中。 首先我们看下什么是响应式网页设计。它为用户从他们的电脑切换到iPad、iPhone、黑莓、HTC、平板电脑等等,该网站能自动切换适应的分辨率,图像大小和脚本。

响应式Web设计

在设计中经常遇到这几个问题: 1.想要网站兼容手机、平板电脑、pc,就得为不同的设备定制不同的版本。 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本。 3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好?