响应式Web设计:50实例例与实践

  原文地址:http://designmodo.com/responsive-design-examples/

    译者序:当我看到这篇文章的时候,还好发布的时间不算太早,主题很对我的胃口,因为我的Blog已经这么做了。但这篇总结的很全面,提到了一个新的名词“响应式Web设计”,作为Web内容应该去更加灵活的呈现在不同的终端上。这让我想起了之前写的一篇文章《未来我们只需要浏览器》,随着智能手机和各种Pad的发展,内容终端终究会发生改变,Web展现需要去适应这种趋势,并带来优秀的阅读体验。

    响 应式Web设计是在开发和设计网站过程中产生的一种方式,它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说,这种设计概念,就是让原本1292像素宽,4栏的内容,能够很好地显示在1025像素宽的用户屏幕上,同时还能自动简化成2栏。当然,让它很好的适应智能手机和其他种类电脑的屏幕也就成了水到渠成的事了。这种特殊的设计形式就被成为“响应式Web设计”。

    响应式Web设计与传统的设计方式截然不同,开发人员(特别是新手)必须要理解它的优势和弊端。这篇文章正是为大家揭示一些实例的。(这里介绍一个叫“Media Queries”的网站,里面介绍了更多实例和演示)

    数据表格是响应式Web设计的经典使用情景,实现它的想法与传统的设计理念有很大不同。数据表格默认很宽,当你要查看它全貌时,你得缩小表格,但这时字会变 的很小,很难去阅读。然而当你想看清楚上面的字时,就不得不再把表格放大,这时要查看完整表格就得横滚加纵滚。这么阅读表格也太KB了。或许重新格式化表格或以饼图形式展现是种解决方案。再不然,你可以弄一个迷你图,即使在窄屏幕里它也能适应。

    响应式Web设计中的图像以流式图像为主,可以被上下文感知的图像所替代,这是一种更好的设计方式。这种技术的真正意义在于,能够让图像适应不同的屏幕分辨率,更大的或更小的。所以它与传统设计的理念和技术都有很大不同,合理使用会让你的网页化腐朽为神奇。

响应式Web设计实例

响应式Web设计:50实例例与实践_第1张图片

Simon Collison

响应式Web设计:50实例例与实践_第2张图片

Andersson-Wise Architects

响应式Web设计:50实例例与实践_第3张图片

Stephen Caver

响应式Web设计:50实例例与实践_第4张图片

Sparkbox

响应式Web设计:50实例例与实践_第5张图片

Food Sense

响应式Web设计:50实例例与实践_第6张图片

The Boston Globe

响应式Web设计:50实例例与实践_第7张图片

Think Vitamin

响应式Web设计:50实例例与实践_第8张图片

Sasquatch! Music Festival

响应式Web设计:50实例例与实践_第9张图片

Internet Images

响应式Web设计:50实例例与实践_第10张图片

Staffanstorp

响应式Web设计:50实例例与实践_第11张图片

Seminal Responsive Web Design Example

响应式Web设计:50实例例与实践_第12张图片

Naomi Atkinson

响应式Web设计:50实例例与实践_第13张图片

Forefathers Group

响应式Web设计:50实例例与实践_第14张图片

Spigot Design

响应式Web设计:50实例例与实践_第15张图片

New Adventures In Web Design Conference 2012

响应式Web设计:50实例例与实践_第16张图片

Illy Issimo

响应式Web设计:50实例例与实践_第17张图片

Arrrrcamp Conference

响应式Web设计:50实例例与实践_第18张图片

Robot or Not?

响应式Web设计:50实例例与实践_第19张图片

Earth Hour

响应式Web设计:50实例例与实践_第20张图片

Clean Air Commute Challenge

响应式Web设计:50实例例与实践_第21张图片

Launch Kit

响应式Web设计:50实例例与实践_第22张图片

Teixidó

响应式Web设计:50实例例与实践_第23张图片

Ribot

响应式Web设计:50实例例与实践_第24张图片

Deren Keskin

响应式Web设计:50实例例与实践_第25张图片

Sweet Hat Club

响应式Web设计:50实例例与实践_第26张图片

Glitch

响应式Web设计:50实例例与实践_第27张图片

dConstruct 2011

响应式Web设计:50实例例与实践_第28张图片

Adaptive Web Design

响应式Web设计:50实例例与实践_第29张图片

Authentic Jobs

响应式Web设计:50实例例与实践_第30张图片

Five Simple Steps

响应式Web设计:50实例例与实践_第31张图片

Splendid

响应式Web设计:50实例例与实践_第32张图片

Ryan O’Rourke

响应式Web设计:50实例例与实践_第33张图片

FlexSlider

响应式Web设计:50实例例与实践_第34张图片

El Sendero del Cacao

响应式Web设计:50实例例与实践_第35张图片

Do Lectures

响应式Web设计:50实例例与实践_第36张图片

St Paul’s School

响应式Web设计:50实例例与实践_第37张图片

Naomi Atkinson Design

响应式Web设计:50实例例与实践_第38张图片

Ben Handzo Photography

响应式Web设计:50实例例与实践_第39张图片

Stunning CSS3 Media Queries Example

响应式Web设计:50实例例与实践_第40张图片

Nordic Ruby Conference

响应式Web设计:50实例例与实践_第41张图片

Halifax Game Jam

    响应式Web设计:50实例例与实践_第42张图片

响应式Web设计:50实例例与实践_第43张图片

ASU Online

响应式Web设计:50实例例与实践_第44张图片

3200 Tigres

响应式Web设计:50实例例与实践_第45张图片

Pixelab

响应式Web设计:50实例例与实践_第46张图片

Kings Hill Cars

响应式Web设计:50实例例与实践_第47张图片

8 Faces

响应式Web设计:50实例例与实践_第48张图片

Asbury Agile

响应式Web设计:50实例例与实践_第49张图片

Alsacréations

响应式Web设计:50实例例与实践_第50张图片

Sleepstreet


你可能感兴趣的