前端观察 » ShowCase

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

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的网站。

国外35个极简主义网站设计

神飞 — Sat, 10 Sep 2011 07:00:16 +0000

原文：国外35个极简主义网站设计
译自：35 Effective Examples of Minimalism in Web Design
请尊重版权，转载请注明来源，多谢！

极简主义的网站设计是我的最爱，之前前端观察也有分享过很多极简主义的网站设计，这里是一批由speckyboy.com收集的另一批很赞的极简主义网站设计，供大家参考吧～～

白色极简主义网站设计

灰色极简主义网站设计

黑色极简主义网站设计

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

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

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

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

Nexus Art Cafe

国外30个醒目的充满活力的网站设计

神飞 — Sat, 10 Sep 2011 05:00:23 +0000

原文：国外30个醒目的充满活力的网站设计
译自：30 Strikingly Vibrant Web Designs for Inspiration
请尊重版权，转载请注明来源，多谢！

在设计中使用明亮、高对比的颜色可以为你的创意工作提供一个强大的工具。亮色可以充分的吸引注意力从而使得一个设计表现得比较有趣、年轻、调皮和具有现代感。由于使用了大胆的色彩，可以利用其积极的主题，就好象小孩子用蜡笔尽情绘画一样。这里是一些很棒的网站设计收集，希望可以给你点灵感。

POPA

Ryan Keiser

Tim Biskup

Sunday Best

Girl Effect

Bit This!

Solo

Tease

Netlife Research

Carsonified

vijufest.ru

Jacob Lee

Daniel Martín

OrangeSprocket

Bzzy App

RUhotEnuf?

Carbonmade

Alfred App

Rice Bowls

Love of My Life

McFarlane

Bestwork

Tori’s Eye

Republic2

Analogue

AZTROLAB

89Bytes

Trent Walton

Denny’s

feels.tv

25个漂亮的导航菜单设计

神飞 — Tue, 28 Jun 2011 15:23:08 +0000

原文：25个漂亮的导航菜单设计
译自：25 Beautiful Navigation Menus
请尊重版权，转载请注明出处，多谢！

导航菜单是网页设计中最关键的一部分，因为它们对于网站的可用性和用户体验至关重要。导航结构比较烂或者在导航中有明显不足的网站可能会困扰用户并最终导致用户找不到想要的页面和内容而离开。

除了实用性方面，导航菜单也给设计师提供了创造创意的机会。本文中，我们将展示25个使用漂亮菜单的网站。你会看到各种不同的风格，他们或许能为你的设计提供些灵感。

WPZOOM

Andy Waldrop

Archibald Studio

Namesake

Designer Themes

dfied

Ten Little Monkeys

Madison

Vitamin T

Charbon Studio

Cornered

Toasted Digital

Polaroid

Bestwork

Bully! Entertainment

David Hellman

Collaborative Fun

3 Sided Cube

Biola Undergrad

Keith Homemade Cakes

Fixel

FreeAssociation

Hungarian Wine Society

Pointless Corp

When it Drops

国外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

超酷的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

网页中的大字体设计

神飞 — Tue, 22 Feb 2011 11:01:50 +0000

原文：网页中的大字体设计
译自：55 Examples of Huge Typography in Web Design
30 Examples of Big Typography in Web Design
原作者：Gisele Muller
请尊重版权，转载请注明来源！

大大的字体设计是一个很好的展示网站特色的方法，它通常可以很好的向用户传达网站信息，一目了然，并给人印象深刻。很多网站设计中采用了这种方法，在页面最醒目的地方展现最有创意的字体设计，通常，这些大字体就是网站的logo或者标语/口号。

本文展示国外80多个优秀的在网页设计中采用大字体的案例，以供参考。当然，随着各大浏览器对CSS3特性的支持，基于font-face和文字渐变的设计会越来越多，这种经典的设计方法会被广泛应用。

Gerren Lamson

Tower

Dotvita

Forefathers

Campaign Monitor – Hiring

AWP Express

efingo

Marie Catrib’s

Love of my Life

Spark Box

Pop Chart Lab

Carsonified

Matt Hamm

Fill Studio

Stephen Caver

So1o

Jeremy Church

3 Sided Club

miiks

Visual Republic

HTML5 Logo

Rothco

Jon Brousseau

Denise Chandler

Salt of the Earth

Kyle Steed

Notes from California

Polecat

neue

Poke

CharlesElena

Chirp >> The Twitter Developer Conference

Happy Cog’aoke 2

Morphix

teez

Sketchen

Digital Podge

zee

Make Photoshop Faster

rareview

Me In Motion

Rich Brown

Biz Break

barneyfunk

TPUTH

Bills

Boxee

Mulletized

gapmedics

merge

sketch

thePlant

carsonified

Glitch

goslingo

bigcartel

stackoverflow

gummisig.com

Ryan Keiser

finch

Cupcake Creative Studio

Hull Digital Live

Bullet Pr

electricpulp

notoriousdesign

forabeautifulweb

Mark Boulton

Daniel Hellier

visualbox

Brunet-Garcia

fajnechlopaki

flashgamingsummit

Grow

wordit

objectified

polar gold

elysiumburns

blackestate

Giant Creative

takeshape

Alpha Multimedia

fl-2

oliverkavanagh

The Urban Landscape Lab

Denise Chandler

HTML5本地存储初探

Robin — Wed, 05 Jan 2011 02:49:44 +0000

html5带给我们的不仅仅是更多语义丰富的标签，还有更多更牛逼的特性，比如“离线存储”。对于台式电脑来说，或者它并没有带来什么惊喜，但是对于移动设备来说离线存储简直就是一个神迹。对于任何拥有支持离线存储浏览器的移动设备，比如iphone，ipod touch，离线存储使得web前端工程师可以很容易的针对它们开发应用程序。

前面吹嘘了一段，不过说实在的，html5本地存储就目前来说还是很受限的。其一，浏览器限制，目前只有 Safari 3.1 and later, and in iPhone OS 2.0 and later. 提供了javascript database 原生支持，不过也有 Taffy DB 可以曲线救国。(还没有用过，不敢妄下结论。)。其二，服务器端需要修改配置，旦如果是自己的服务器就很简单了。

下面就以一个简单的offline web app－note book 为例，记录一下为iphone/ipod touch开发web app的过程。不是经验，只是初探。

建立适合 iphone/ipod touch 的UI
数据的本地存储
文件的本地存储
完善这个app (不打算完善它了，有时间做一个实用的app专门介绍 iphone web app 的开发吧)

首先，适合iphone/ipod touch 的UI 它并不是本文的重点，有兴趣的同学可以移步这里。这里只强调一点：你默认做的页面，放到iphone看会变的很窄，字很小。这是因为iphone用它320px宽的屏幕显示了一个默认980px宽的页面，你的内容被按比例缩小了。要解决这个问题很简单，只要在html的head区域加一个meta标记，具体语法请看这里。也就是这样：

这个问题解决之后我们就可以肆意的使用html5和css3来打造界面了，（针对设备开发可以不考虑兼容性，真是畅快淋漓呀。）

我大概做了个丑陋的界面：

html代码， CSS代码 (其实你可以不用看，最后有打包的代码)

完成了UI，我们就需要对数据进行处理了。

在开始“数据”的本地存储之前，我们先来了解一下client-side database storage API:

the client-side database storage API allows web applications to store structured data locally using a medium many web developers are already familiar with – SQL.－－webkit blog

目前只有webkit核心的浏览器支持这一特性。你甚至都不能在w3c的html5工作草案中找到（cs-db）client-side database 的详细描述。

首先我们要尝试建立一个数据库链接：

try {
	if(!window.openDatabase){  //检测浏览器是否支持cs-db
		alert('not supported cs-db!');
	} else {
		var shortName = 'noteDB';
		var version = '1.0';
		var displayName = 'Note book database';
		var maxSize = 65536;
                //创建一个数据库
		var db = openDatabase(shortName,version,displayName,maxSize);
	}
} catch(e){  //尝试捕获错误
	if (e == 2){
		alert('Invalid database version.');
	} else {
		alert("Unknown error "+e+".");
	}
}

如果以上代码无误，你就会在safair或者chrome的开发者工具中看到这个数据库：

在右侧区域可以直接执行一些sql查询，但是我总是得到 “发生意外错误“0”。” 这样的结果，不知道是不是RP的问题。

接下来就是创建表，以及执行一些sql语句进行增删改查。

js执行sql的基本语法大致是这样的：

db.transaction(
	function (transaction){
		transaction.executeSql(sqlquery,[],dataHandler, errorHandler);
	}
);

其中transaction.executeSql中参数依次为：sql查询字符串，传递给sql查询的参数，数据处理句柄，错误处理句柄。其中只有第一项为必选，其余都为可选项。

第二个参数的用法大致是这样的：

transaction.executeSql("UPDATE people set age=? where name=?;",[ age, name ]);

查询字符串中的“ ？” 会被后面数组中的变量依次替换。

注意：以上我用了“大致”这个词，因为没有官方的文档（W3C-web database），只是从一些其它文献以及自己判断得来，若有错误还请指正。

下面我们创建一张用来存储note的表：

db.transaction(
	function (transaction){
		transaction.executeSql(
                'CREATE TABLE IF NOT EXISTS notes (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,titel TEXT, note TEXT NOT NULL, date DATE);',errorHandler);
	}
);

errorHandler是这样的：

function errorHandler(transaction, error){
	alert('Error was: '+ error.message +'(Code:'+ error.code +')');

	var fatal_error = true;
	if(fatal_error){
		return true;
	}
	return false;
}

error.message 是一段错误描述，error.code 是错误代码 (详情)

再看看如果从db中检索出数据并显示到页面上：

db.transaction(
	function (transaction){
		transaction.executeSql("SELECT * from notes;",[],dataHandler, errorHandler);
	}
);

function dataHandler(transaction, results){
	var string = "";
	for (var i = 0; i" + row['titel'] + "

";
	}
	var listConts = $('listCont');
	listConts.innerHTML = string;
}

可以看出，基本上和php之类后端语言操作大同小异。
更多代码可查看示例程序，不再一一罗列。

完成了数据的本地存储，就要将文件存储也搞定。为了实现文件的本地存储，html5搞了一个叫 manifest 的文件，这个文件就是一个缓存清单，把需要缓存在客户端的文件告诉浏览器。manifest是一个mimetype为 text/cache-manifest 的纯文本文件。注意，这点很重要。

下面是一个manifest文件的例子：

NETWORK, CACHE, FALLBACK 都是可选的。

manifest文件必须以 CACHE MANIFEST 开头

其后需要下载并缓存的文件使用相对或绝对路径皆可，每个资源一行。

NETWORK段表明一些在线资源所在的域，所有这个域下的资源都不会被缓存，即使客户端处于离线状态，也会尝试去请求基于这些域的资源。

CACHE段还不是很明白

FALLBACK段下面每行都包含两部分内容，用空格分隔。后半部分是当前半部分路径不能访问时的备选路径（很拗），如上图就是，如果demoimages目录不能访问时，尝试访问images目录。

manifest文件介绍就到这里，下面创建我们自己的manifest文件：

我们只需要缓存两个文件即可，nbStyle.css 和 nbScript.js。还有index.html 本身，由于manifest文件会默认缓存引用自己的文件，所以index.html 不能在缓存列表中写出来：

CACHE MANIFEST
# version: 2010-01-20 22:30

nbStyle.css
nbScript.js

就是这么简单了，我们将他保存为 notebook.manifest 文件，并和其它文件一起放在根目录。

最后一个问题，如果将notebook.manifest的mimetype标识为 text/cache-manifest 类型呢？我知道有两种方法：

1. 在站点根目录建立 .htaccess 文件，在其中声明.manifest 的mimetype ，这个需要修改下服务器的配置文件，我没有尝试成功。

2. php环境在apache目录寻找一个为 “mime.types” 的配置文件，在其最后添加一行：

text/cache-manifest            manifest

然后在index.html文件引用它：

搞定了这些东西，你就可以尝试用webkit访问你的应用，然后离线，再尝试使用它，程序应该也可以照常运行。

至此，html5的离线存储基本介绍完了，下面附上打包的代码，代码本身没有什么难度，只是我写的太烂了:

代码下载

其实还远没有完，缓存下来的文件如果被更新了怎么办呢？如何通知客户端更新缓存其实也有api，慢慢的再探索吧。非常期待与大家探讨html5相关的问题。