用于支持多个设备的原型网站的工具/框架

Question

我想创建一个可以在多个设备上加载的门户网站，主要是手机[只是android或iphone也很好]和桌面浏览器。

我正在尝试对我做过一些研究的产品创意进行原型设计。我想构建一个最小的可行产品，我可以给朋友使用，用于演示等，并最终迭代它。

由于目前我是团队中唯一的人/开发人员[每周4小时]，这是我的主要要求：

1. 应该有更少的学习曲线让我开始
2. 不需要是通用的，但应至少满足一个子集。 [出口浏览器和iPhone [ipad，安卓手机]只是很好
3. 良好的社区支持，很容易找到合适的人。
4. 表现不是一个大问题
5. 原生代码或外观不是一个大问题
6. 我希望主要用户成为手机用户，但目前手机上的功能有限。
7. 在我有一些牵引力之后，我不介意扔掉整个东西并以更好的方式重写一些东西。

HTML5网页可以加载到多个设备上[？]，所以这样的话很好。

我主要是后端dev [Java，ruby，DBs，solr，lucene，memcache等]所以我不熟悉web技术[jscript，jquery，css，ajax]等，这使得这个很棘手。我知道ruby并且正在尝试学习rails [学习黄瓜，水豚等]并且发现它非常用户友好且快速进行原型设计

有助于构建此类门户的任何[工具/框架列表]。由于我每天都使用红宝石和铁轨，所以会喜欢这种生态系统的东西，但不是必需的。

感谢。 P.S：门户网站是一个小型的电子商务网站，可以与不同的eco​​mmerse网站和用户社交网站等进行交互，为他们带来一些推荐[现在想的比较购物门户网站很好]

Answer 1

我建议使用CSS媒体查询遵循responsive design方法。

这样您就不必担心任何原生或任何设备。只关注CSS和HTML。

基本上，您使用移动优先方法构建，然后使用媒体查询，随着设备屏幕尺寸的增加，您可以增强布局（和/或功能）。

查看可以提供帮助的this list of frameworks。我已经使用了320及以上，LESS和Amazium。选择一个适合你需要的。

以下是响应式设计中的一些common patterns。

这是一个gallery出色的响应式设计。