Responsive Web Design: 50 Examples and Best Practices
Designmodo.com版权所有
作者：Adrian
译者：UCD翻译小组，波希米亚
原文地址：http://designmodo.com/responsive-design-examples/
译者序：当我看到这篇文章的时候，还好发布的时间不算太早，主题很对我的胃口，因为我的Blog已经这么做了。但这篇总结的很全面，提到了一个新的名词“响应式Web设计”，作为Web内容应该去更加灵活的呈现在不同的终端上。这让我想起了之前写的一篇文章《未来我们只需要浏览器》，随着智能手机和各种Pad的发展，内容终端终究会发生改变，Web展现需要去适应这种趋势，并带来优秀的阅读体验。
响 应式Web设计是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说，这种设计概念，就是让原本1292像素宽，4栏的内容，能够很好地显示在1025像素宽的用户屏幕上，同时还能自动简化成2栏。当然，让它很好的适应智能手机和其他种类电脑的屏幕也就成了水到渠成的事了。这种特殊的设计形式就被成为“响应式Web设计”。
响应式Web设计与传统的设计方式截然不同，开发人员（特别是新手）必须要理解它的优势和弊端。这篇文章正是为大家揭示一些实例的。（这里介绍一个叫“Media Queries”的网站，里面介绍了更多实例和演示）
数据表格是响应式Web设计的经典使用情景，实现它的想法与传统的设计理念有很大不同。数据表格默认很宽，当你要查看它全貌时，你得缩小表格，但这时字会变 的很小，很难去阅读。然而当你想看清楚上面的字时，就不得不再把表格放大，这时要查看完整表格就得横滚加纵滚。这么阅读表格也太KB了。或许重新格式化表格或以饼图形式展现是种解决方案。再不然，你可以弄一个迷你图，即使在窄屏幕里它也能适应。
继续阅读 »
UX Case Study: Designing a user-focused web app
Brian Cray版权所有
作者：Brian Cray
译者：UCD翻译小组，波希米亚
原文地址： http://briancray.com/2010/01/26/ux-case-study-designing-user-focused-web-app/
这篇文章记录了Nearby Tweets改版的完整设计过程。Web开发者和商家期望借此获取些灵感。用户则更有兴趣找寻这些设计中所蕴藏的东西。当然，我希望能在文章结尾了解到你的想法和反馈！OK，我们开始吧。
故事的起因是这样地…
这一切开始于对Nearby Tweets的第一次迭代，目的是让当地的人与人、商家与商家之间能够通过一种简单的形式相互取得联系。
但产品开发向来不可能十全十美，只有不断迭代——产品好坏取决于用户认可。因此，借Uservoice的机会得尽我所能快地跟用户接触。通过Uservoice，用户可以针对Nearby Tweets的改版进行投票。
继续阅读 »
似乎性能优化永远都是属于门户网站的事儿，与咱们小民无关？！
这种想法在网络技术高速发展的今天，似乎有点落伍了。如果你是专业从事互联网的技术人员，甚至是负责优化公司网站的专家，自己的小站也别忘记适当地优化一下.
好像只有雅虎的人平时谈论这个问题比较多,是因为雅虎发明了YSlow和一套检验网站性能的机制?如果你使用的是Firefox,可以安装YSlow,来查看自己网站的性能,根据提示进行优化.总结一下,作为个站,可以做的优化工作大概这么几个:
- 使用更少的HTTP请求;
- 使用CDN
- 把CSS放在页面顶部(放<head>里)
- 把JS放在页面底部(紧跟着放</body>前就行)
继续阅读 »
今天看了篇关于Web Form Design的成功案例，虽然讲的事情很简单，但总结了一些方法，翻译过来做个原始积累吧，以后写东西举例子时也好有个典型可以引用。下面是译文：
如果回顾一下Sampa的注册表单，到现在它已经经历过4-5个不同的版本了。一度我们要询问您15个问题。在那之后，我们先是与当地的一位用户体验专家对此进行一些简化，而后又通过与一家波特兰用户体验公司的合作，将其变的更简，现在我们只剩8个填写项了：
- 姓名
- 电子邮箱
- 确认电子邮箱
- 密码
- 确认密码
- 同意使用条例
- 你希望的网站地址（形如：b3inside.sampa.com）
- CAPTCHA （挑战码）
先来看下这个网站的注册表单截图：
继续阅读 »
