前端观察 » 设计

85个很赞的响应式网页设计

神飞 — Tue, 01 Nov 2011 17:29:14 +0000

整理自：85 Amazing Showcase of Responsive Web Design
中文原文：85个很赞的响应式网页设计
请尊重版权，转载请注明来源，多谢！

上一篇中我们了解了一下响应式网页设计是什么，现在趁热打铁，来欣赏一些国外的一些很赞的响应式网页设计，看看他们是如何实现对PC端浏览器和移动终端的全面支持的。

想要查看效果很简单，打开这些页面，然后缩放浏览器窗口就可以了——当然，要用chrome/safari/firefox/opera等浏览器，IE请绕道～～

当然，如果你有发现国内有好的类似设计，欢迎推荐！

Design made in Germany Magazine 5

响应式网页设计

神飞 — Tue, 01 Nov 2011 16:36:11 +0000

这个话题最近很火爆，我也一直在关注，响应式网页设计和移动互联网密切相关，并因移动终端的丰富和普及而兴盛，并且是一个颇具争议的话题，我今天将和大家探讨下。

上周写了个简单的ppt在组内大概介绍了下，感兴趣的话可以先看下这个PPT。

移动互联网的现状和未来

在说到这个话题前，我们先看下网页设计和前端开发的现状：

全球有超过53亿手机用户（包括传统手机）
国内3G用户超过1亿
iPhone4手机在2010年出货量超过3000万部；
iPhone 4S上市前3天卖掉400万部；
Android手机每天激活超过50万部；
iPad出货量已经超过2.5亿部；
预计到2015年，移动互联网的数据流量将超越桌面端的流量。
。。。

嗯，大家也许已经开始注意到，自己和身边的朋友也都越来越多的用上了iPhone或者android手机或平板——一两年前我们预料的移动互联网时代即将来临，现在已然实现了——我们正处在移动互联网快速发展的时代——已经不再是起步阶段了。

那么，什么是响应式网页设计？

响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的！

或许大家之前会注意到，有很多知名网站都推出了iPhone或针对智能手机的专门网站，比如3g.qq.com、m.taobao.com、ipad.xxx.com等等。。。甚至前端观察之前也尝试过用wordpress插件实现m.qianduan.net的移动网站。

那么问题就来了——我们要为每一个设备做一个单独的网站吗？来让网站在每个设备中得到相应的视觉风格和操作体验？

这样势必就要增加很多的工作量，而且很多还是重复的。

我们在做页面的时候，一般很强调模块化的概念，我们要求一个合格的模块要能够“可扩展、无侵染”，它要能够用在任何地方都能够正常的显示。响应式网页设计与此类似——网站在任何设备中都能够正常适配，而不用为每个设备单独做个子网站！

但是，产品经理和设计师可能还是会要求网站在各个浏览器里面表现要一模一样，甚至要像素还原——WTF！不同的浏览器本身的功能、行为和处理方式都不一样，为什么要表现完全一样？！

let the browser flow…

怎么做？

其实响应式网页的实现很简单，都是大家熟悉的技术。

media query(媒体查询)

因为现在主流的智能终端都是基于iOS和Android的，而它们自带的浏览器都是基于webkit内核，所以我们可以完全使用viewport属性和media query技术实现网站的响应性：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

后面的initial-scale表示初始缩放，maximum-scale表示最大缩放比例，1意味着不能进行缩放。

/* for 240 px width screen */
@media only screen and (max-device-width:240px){
    selector{
    }
}
 
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
    selector{
    }
}
 
/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
    selector{
    }
}

当然依靠屏幕宽度来进行适配是最简单的方法，media query有很多参数可以使用比如orientation、aspect-ratio等，不太了解的可以查看这篇详细的介绍。

其实，media query是响应式网页设计中被用到最多的技术。

fluid grid(流体网格)

很多项目都在使用网格技术(或者叫栅格)，前几年960.gs很流行，但是随着屏幕分辨率的普遍提升，它已经不太适合当前需求了，于是最近几年fluid grid开始逐渐多了起来，这种技术其实也很简单，只是将格栅的单位由px变成%，用百分比来控制页面每列的宽度，从而实现宽度的自适应。

使用流体网格的网站能够根据屏幕宽度自动调整页面中每列的宽度，从而保证页面的完整展现和基本功能。这也是一种不错的方法。

flex box

flex box是css3中的新技术，它很强大，可以实现很多我们之前无法想象的自适应布局。

有时我们希望网站能够以webapp的外观呈现给手机用户，flexbox是个不二的选择。

比如，要实现这样的简单结构：

它很像一个app的结构，头部和底部固定，中间高度自适应，用flexbox可以简单实现：

.flex_wrap{
	height:100%;
	display: box;  
	display: -moz-box;  
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	box-orient: vertical;
}
.flex_bd{
	box-flex: 1;
	-moz-box-flex: 1; 
	-webkit-box-flex:1;
	background:#E7E7E7;
	overflow-y:auto;
}
.flex_hd{
	background:#16364C;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#FFF;
	font-weight:700;
	font-family:14px;
}
.flex_ft{
	background:green;
	height:30px;
	line-height:30px;
	text-align:right;
}

HTML代码：

<div class="flex_wrap">
	<div class="flex_hd">前端观察</div>
	<div class="flex_bd">
		<p>这里是主内容区</p>
		<p>这里是主内容区</p>
	</div>
	<div class="flex_ft">
		<a href="http://www.qianduan.net/about" title="关于我们">关于我们</a>
		<a href="http://www.qianduan.net/copyright" title="版权声明">版权声明</a>
		<a href="http://www.qianduan.net/sitemap" title="网站地图">网站地图</a>
	</div>
</div>

虽然这里还会有点儿问题，比如主内容区域内容太多会被隐藏掉，因为android webkit和iOS 5之前的mobile safari均不支持overflow:scroll属性，但是这个问题还是很好解决的，比如在里面嵌套一个子容器，用js来给定个高度并使用定位来实现滚动条从而完整展示内容，或者直接使用iscroll等js库来实现。好消息是，iOS5中safari开始支持overflow:scroll了。

不足之处

如果你关注网站性能之类的话，可能已经发现了一些问题：

加载很多不需要的资源，比如多余的图片和样式内容
带宽限制
移动终端的内存和CPU限制
图片大小和屏幕大小不匹配

嗯，任何一个方案都不是完美的，但也不会很糟糕。下面我们会提到一些可行的优化方案：

HTML5本地存储

对于支持HTML5 appcache /manifest特性的浏览器，我们可以将一些不常改动的静态资源存储到本地，比如css文件，css中用到的图片，以及一些js文件等：

CACHE MANIFEST
NETWORK:
/*
 
CACHE:
img/bg.jpg
img/days.otf
slideshow.js
slideshow.css
classList.js

然后将文件保存为manifest格式，并在HTML标签中引入即可：

<html manifest="responsive.manifest">

这样，用户在第一次访问的时候会慢一点儿，但是后续访问会很快，3G网络中也能为用户节省带宽。

移动设备优先

一种新的设计流程是，先为移动设备设计界面，然后将PC端作为一个扩展。

这样做的好处是显而易见的，移动终端不会加载多余的资源，也不会因为PC端的样式而重绘页面，同时也不会影响PC端的表现。

流体图片(fluid image)

页面中的图片有时会比手机/平板的屏幕（viewport）宽，这样会将页面容器撑开，但是移动浏览器又不能scroll，结果图片被切掉一部分，然后还会有一部分内容被隐藏掉，用户看不到。

解决这个问题的方法很简单，将img的最大宽度设置成100%就可以了：

img{max-width:100%}

嗯，这里的前提是，没有给img标签设置宽度和高度，否则显示会有问题。另外不建议直接设置width=”100%”，因为会把小图拉大，模糊显示。

同理，video标签和iframe标签的宽度也可以这样做，而且最好不要使用iframe，宽度是个问题，性能也是一个方面吧。

CSS3 image

这个方法有些惊艳

我们都知道可以用::before和::after伪元素+content属性来动态显示一些内容或者做其它很酷的事情，而且在CSS 2.1中即被支持。不过content属性在CSS 2.1中只能用于这两个伪元素中，而在CSS3中，任何元素都可以使用content属性了，这个方法就是结合css3 的attr属性和HTML自定义属性的功能：

<img src="image.jpg" 
	data-src-600px="image-600px.jpg" 
	data-src-800px="image-800px.jpg" alt="">

然后用media query来动态赋值：

@media (min-device-width:600px) { 
	img[data-src-600px] {
		content: attr(data-src-600px, url); 
	}
}
@media (min-device-width:800px) {
	img[data-src-800px] {
		content: attr(data-src-800px, url);
	}
}

当然，这种方法也有不足之处，比如PC端宽屏幕需要加载两个图片文件，然后我们也要为此准备多张图片文件等。

pre标签

有的网站，比如，像前端观察这样的技术博客，会用pre来显示源代码，而浏览器对pre标签默认设置white-space:pre，这样，代码就不会换行，从而撑开子容器，造成内容被隐藏的问题：

右边的文字被隐藏掉了。

解决方法很简单：

pre{
	white-space:pre-wrap
	word-wrap: break-word;
	word-break: break-all;/*如果要兼容IE，可以加上这句，连续字母断行的问题伤不起啊。。。。*/
}

当然，不只是pre标签，关键是white-space和word-break属性的值。

嗯，主要的技术和技巧其实就这些，大家不会陌生。下面是一些比较有用的工具什么的：

响应式网页设计工具与资源

国外在响应式网页设计上已经走的很远了，已经有很多工具和资源供我们参考和使用：

CSS 框架

实用工具

Respond.js，让IE6-8支持meidia query
Responsive Design Testing 简单而方便的测试网站的响应性的工具，输入网址即可看到网站在不同分辨率下的表现
Resize My Browser 缩放浏览器工具，不过不支持chrome和opera浏览器
Media Query Bookmarklet 顾名思义，这是一个关于media query的书签工具
ProtoFluid 在线查看和调试网站对移动终端兼容性的工具，很赞
ScreenFly 和ProtoFluid类似
responsivepx 更直观的测试网站对不同分辨率的适配性

争论和总结

响应式网页设计被提出以来，争论就不断，其实核心问题只有两个个：太多的资源请求和有限的终端支持之间的矛盾、响应式的网页设计和移动终端在用户体验和视觉风格上的差异。前者不能容忍在弱小的手机/平板上通过龟速的3G/2G网络来加载一个笨重的PC端页面，而后者纠结响应式网站不像手机网站。

我的想法是，具体问题具体分析，比如，强内容的网站，完全可以尝试响应式网站，而重视觉和功能的网站，则可以尝试建立一个独立的移动网站。

另外，显然，响应式网页设计的大部分技术，是可以用在WebApp开发中的。

最后，欢迎各种吐槽、各种批评、各种建议、各种发散、以及各种新观点新技术～～欢迎发表评论～～

PS：如果你手上有android/iPhone，可以直接访问下前端观察。 :)

参考文章：

23个在网页中使用截屏的实例

神飞 — Sat, 24 Sep 2011 10:46:23 +0000

译自：23 Examples of Screenshots in Web Design
中文：23个在网页中使用截屏的实例
原作者：Gisele Muller
请尊重版权，转载请注明来源，多谢！

无论你是在开发app或者网站，以截屏的方式告诉潜在的客户他们将得到的结果是个很不错的主意。而且如果你的产品看起来足够漂亮，你可能只是想要将其放在前面和中间，让它们成为页面的焦点。

为了给你提供点儿灵感，我们收集了一些这样做的网站。在这些例子中，你将会注意到这些截屏中的很多——就算不是全部——都被包围在他们可能出现在的某个浏览器（mac版safari最常见）或者设备之中。这有助于添加些语境，然后也是兴趣的另一个层面。

其实最近国内的网站也越来越多的见到这种设计了，特别是关于iOS/Android app的网站。

Theme Trust

Fork

Bellstrike

Luccaco

Kickoff

innove

Shopify

Podio

Syxer

EEHarbor

Tapp3 Media

sketchdock

webcontact.de

nealite

nosotros

nclud

Stylapps

Due

River of News

envero

GlobeConvert

Foundation Six

Pulse

45个网页中创意的大字体设计

神飞 — Sat, 10 Sep 2011 06:00:51 +0000

中文：45个创意的大字体设计
译自：45 Creative Examples of Large Typography In Web Design
请尊重版权，转载请注明来源，多谢！

排版的历史可能和人类一样悠久。大字体可以迅速吸引网站访问者的注意力。所以在网页设计中，选择正确的字体被认为是最重要的一个工作。事实上，设计可以被词语的力量所颠覆。大字体已经成为网页设计是最喜爱的工具了，因为它可以“大声”的传递他们的信息从而激发用户的体验。大字体可以用于网页中的任何地方，它在页面头部的时候通常看起来很酷，而用于文字的时候就会显得很华丽，或者用于结尾的时候甚至可以作为一种视觉的增强。这里我们又收集了很多使用大字体所创造的很赞的布局。

Nexus Art Cafe

国外30个超赞的使用纹理的网站设计

神飞 — Mon, 13 Jun 2011 15:35:22 +0000

中文原文：国外30个超赞的使用纹理的网站设计
译自：30 Brilliant Examples of Texture in Web Design
请尊重版权，转载请注明来源！

纹理在各种设计中都有用到。现在你会常常在名片、手机APP以及网页设计中见到漂亮的纹理。网上也有很多免费的和收费的高质量纹理素材供你使用。适当的使用纹理有助于给设计带来逼真和精细的感觉。在这次展示中，你将发现30个新鲜的使用纹理的网站设计，它们包括多种风格：极简、简约、精细以及颓废。希望能给你带来灵感。

Quantum

Cake Sweet Cake

The Impressto Web Design Bundle

Unﬁnished Business School

Unlayered

ResumeBaking

BigEye Creative

Zoltan Hosszu

Mad About Makeup

Matt Bond

iPhone Icon Design

Leitmotiv

rShahin

STAYA STAYA

Label my Coffee

Balencic

La Web Shop

El Passion

Arjan Jonker

Phillip Caudell

Cultural Solutions

Catcher’s Performance Summary

Intrinsic Studio

Jon Wallace Design

Delicham

Railroad Revival Tour

Malak.be

Definitio

Jarad Johnson

Pixel Stadium

前端设计类书籍推荐

神飞 — Sat, 04 Jun 2011 07:26:53 +0000

位于设计师和后台开发中间的前端开发工程师，其实也都算是视觉动物的，其中很多人同时也是很棒的设计师。而听过彪叔《一专多长》演讲的人大多也会这样要求自己吧，那么无论是设计师本身，还是前端开发工程师，多读些设计类的书会是很好的，有时候或许也会让人豁然开朗的吧。

这里推荐一些设计类的书，有的是我读过的，有的是还没有读过但被同事或者坊间推荐的，推荐给大家。。。

写给大家看的设计书

在卓越购买 | 在当当购买
最近比较热门的设计类书籍，作者将设计的理论提炼为亲密性、对齐、重复和对比4 个基本原则，然后逐步讲解个中要义。这也是本同学们口碑相传的书～～

配色设计原理

在卓越购买 | 在当当购买
配色在网页设计中非常关键，不同的颜色及其搭配代表着不同的情感，可以传递不同的信息，这本书会让你更好的理解色彩在设计中的意义。

设计中的设计

在卓越购买 | 在当当购买
原研哉是日本最知名的设计师之一，日本设计中心的代表。他似乎一直在探索设计的本质，和唐纳德·诺曼一样，原研哉将设计的思考导向于生活。同时推荐原研哉的另一本书：为什么设计

设计心理学

在卓越购买 | 在当当购买
大师唐纳德·A·诺曼的代表作，1988年首版，但是到大概02年才被翻译成中文，书名的英文为《The Design of Everyday Things》，却被翻译成了设计心理学。诺曼似乎要通过书名告诉我们，设计和生活息息相关。同时作为一个进阶，推荐阅读作者的另一本书：情感化设计

佐藤可士和的超整理术

在卓越购买 | 在当当购买
设计师的整理术，又一本“如何享受舒适生活”的书，你会从中学到如何整理和优化代码及工作流程么？
这本书貌似和平面设计关系不大，但是设计的方法是相通的，我相信它也能给我们同样的启发。

还有什么你觉得非常值得一读的设计类图书，欢迎推荐哦。

另：BS下盗版 :P

超酷的HTML5网站设计

神飞 — Sat, 19 Mar 2011 11:08:13 +0000

译自：Awesome HTML5 Websites
中文原文：超酷的HTML5网站设计
请尊重版权，转载请注明出处！

我们已经了解很多关于HTML5的技术了，很多人也开始在自己的项目中应用各种HTML5技术。这里，Design Art Wall收集了15个采用HTML5实现的网站，当然它们还有非常赞的界面设计，这些网站不仅在coding上，更在设计上能给我们更多的参考，当然，国内很多网站仅仅是使用了HTML5的doctype而没有真正的采用HTML5的语义化标签和更多高级特性。嗯，是时候做更多的尝试了。

当然，如果你做了或者见到了很棒的采用HTML5技术实现的中文网站，欢迎通过评论反馈给我们，多谢～～

Youzee

Brasserie Gerard

Web Designer Wall

1MD

Simple as Milk

DBushell

Humaan

Florida After Seven

Free Agent Central

Our Swiss Life

Mighty in the Midwest

Dunnellon

Love of my life

New Adventures In Web Design

La gente ha dichosi

66个网页设计中完美的幻灯展示实例

神飞 — Wed, 10 Feb 2010 16:35:37 +0000

中文原文：66个网页设计中完美的幻灯展示实例
译自：66 Examples of Perfect SlideShow Presentation in Web Design
请尊重版权，转载请注明出处，多谢！

我最近注意到的一个非常有趣的趋势是在幻灯演示中展现关键信息。现代设计师喜欢尝试并观察用户如何与作品进行交互。尽管幻灯并不是一个普遍的趋势但是依然作为新的设计风格而不断涌现，而且越来越多的设计师注意到它并在他们的作品中使用，这种新的趋势开始崭露头角。

在本文中，你将发现各种高度创意的、漂亮的、独特的、以及最有灵感的幻灯效果设计。当然我们这里并不是要你跟随某种趋势，而是希望能够激发你的创意并启发你的想象力以创建你自己的独特的设计，因为你的网站(作品)代表你自己和你的品牌。

网页设计中的幻灯展示

事实上有很多在网站中使用幻灯和图片切换的理由，网站成功的关键因素之一是找到一种最聪明和有效的展示你的信息给用户的方法。之前，幻灯在企业网站的首页非常流行，因为它对于展示企业的信息和服务非常有用，但是现在它已经广泛的用于所有类型的网站了。鉴于它们对于网站的价值，幻灯通常被放在页面中最醒目的位置，这样可以给访问者的非常有冲击力的第一印象。

你或许也注意到，幻灯对于作品集网站也非常流行，因为用幻灯的方式展示你的作品显得非常有意义和有吸引力。

01. Kontoblick

02. Slidedeck

03. Mint

04. Apple

05. Boulevard

06. Delicious

07. Woothemes

08. Osdnetwork

09. Launchmind

10. Areyoufrank

11. Utah-maps

12. Nealite

13. Delugestudios

14. Sketchen

15. Sprinklepenny

16. Hellothemes

17. Hootsuite

18. Designsensory

19. Sling

20. Nclud

21. Icebrrg

22. Edit-studios

23. Ricoverdeo

24. Robalan

25. Xero

26. Pixelnovel

27. Violet

28. Notepod

29. Wufoo

30. Cakephp

31. Gapmedics

32. Tearoundapp

33. Bensky

34. Directdesign

35. Thrudigital

36. Threadless

37. Nosotroshq

38. Epicurious

39. Dailymile

40. Copimaj

41. Hyperxlocal

42. Behance

43. Getmiro

44. Glue.be

45. Valendesigns

46. Foodtease

47. Ncover

48. Tracermedia

49. Viget

50. Barackobama

51. Getzcope

52. Brooklynfare

53. Rapidxhtml

54. Saintjohnsbible

55. Foodnetwork

56. Expressionengine

57. Paramoreredd

58. Radiumlabs

59. Zunostudios

60. Creamscoop

61. Jameslaicreative

62. Vyniknite

63. Freeagentcentral

64. Fastcompany

65. Osmondinteractive

66. Nameourbaby

20多个出色的蓝色系网站设计

神飞 — Mon, 25 Jan 2010 00:57:30 +0000

整理自：Blue Website Showcase
中文：20多个出色的蓝色系网站设计展示
请尊重版权，转载请注明来源，多谢!

Color wheel pro说:蓝色是天空和海洋的色彩。它常常和深度和稳定有关。它象征着信任、忠诚、才智、信心、智慧、信仰、真理与天堂。

蓝色被认为有利于人的身心。它减缓人体新陈代谢，产生镇静的作用。蓝色强烈的关系到安宁和平静。在纹章学中，蓝色用来象征着虔诚和真诚。

你可以用蓝色来推广与清洁(水净化过滤器，清洁剂，伏特加)、空气和天空(航空公司、机场、空调)、水和海洋(海运、矿泉水)有关的产品和服务。与感性的暖色调如红色、橙色和黄色等颜色不同，蓝色跟意识和智慧相联系。在推广高科技产品时使用蓝色可以暗示精确度。

蓝色是男人的色彩；根据研究，它被男性高度认可。深蓝色意味着深度、专业以及稳定；它也是美国企业的首选色彩。

在推广食品和烹调的时候要避免使用蓝色，因为蓝色会抑制食欲。当和暖色如红色和黄色一起使用的时候，蓝色可以创建高对比度、醒目的设计；比如，蓝-黄-红对一个超级英雄来说是一个完美的色盘。

淡蓝色是与健康、康复、宁静、理解和柔软有关。深蓝色代表着知识、能力、完整性和严肃性。

魅族

artlans

播思通讯

可闻设计

JJ.Ying’s GUI World

blue pixel

Morphix

Droplr

Arbel Designs

Sourcebits

Icebrrg

Ballpark

Xero

Box

Skype

Epic Event

Eastpoint Community Church

Screenr

Vegas Uncork’d

Adobe User Group

Business Card Ninjas

Pixelbleed

Zee

这里展示了20多个出色的国内外使用蓝色系的网站设计，如果你有设计或者见过出色的使用蓝色的中文网站，欢迎通过评论或者到Best CSS提交给我们。

2009年最佳网站设计

神飞 — Fri, 11 Dec 2009 01:54:27 +0000

译自： webdesignerwall
中文翻译：2009年最佳网站设计
请尊重版权，转载请注明引用来源，多谢

自从2007年，每一年我都会从Best Web Gallery 收集一些最佳的CSS网站设计(查看07 和08 版本)。好了，现在又到了这个时间了——2009年最佳网站设计。今年我收集了另外50个良好设计的网站。通过这个列表，我注意到，它们中的很多是使用了serif字体的极简主义网站设计。破旧和手绘风格依然很强劲。然而，大背景图风格的网站已经没有去年那么热门了，相反，使用纹理的背景在2009年颇为流行。