Lesson 3: The Amazing New Mobile Web

Lesson 3: The Amazing New Mobile Web

Article 1: This is Responsive by Brad Frost

各种响应式网站设计的资源。

Article 2: Common Mobile Problems

作者做了个问卷调查，调查设计师们在响应式网站设计（RWD，Responsive Website Design）过程中遇到的问题。

The lack of a static design phase

• 与以前设计静态效果图（static screenshots）不同，响应式设计中设计师更加依赖 quick sketches, wireframing and making rapid HTML and CSS prototypes by 'designing' in the browser.
• 尽早地用HTML 设计在浏览器里看效果，然后创建资源（而不是整个布局）。
• Dan Mall's case study on the redesign of Crayola.com
• Stephen Hay's responsive design workflow slides
  • 移动设计工作流
    1. Information Architecture
    2. Interaction Design(wireframe)
    3. Design（设计不是装饰，装饰也不是设计）
  • 响应式设计工作流
    1. Content Inventory – establish and describe the content. This gives you your raw materials
    2. Content reference wireframes – establish rough responsive wireframes in HTML. Allows for really fast iterations.
    3. Design in text (structured content) – establishes content hierarchy and structure. Easily revisable.
    4. Linear Design – Test out the plain jane structured content in HTML in the browser.
    5. Breakpoint graph – display visually where the breakpoints happen
    6. Design for various breakpoints – Start with the small screen first, then expand until it looks like shit. TIME FOR A BREAKPOINT!
    7. HTML design prototype – If w’ere not delivering designs in PS, what do we deliver? Clients wants PS because they’re used to it. Create HTML CSS, and maybe a bit of JS
    8. Present prototype screenshots – It’s part of a presentation psychology – Presenting static “impressions” of the design across the different breakpoints allows you to stay ahead of your client.
    9. Present prototype after revisions – Once revisions have been made, you can show the design in action
    10. Document for production – Deliver a style guide along with the production code.
• responsiveprocess.com
  1. Discovery
  2. Design
  3. Development
  4. Deployment

导航（Navigation）

如果和一般的web设计一样，在顶部导航（或者叫“什么也不变”），可能就不能满足移动设计——内容第一，导航第二（content-first, nav-second）了。继续使用顶部导航，可能会使得 content 难以突出。

图片

分辨率不同，避免图片糊掉。

The solution: Scripts, SVG and icon fonts

Tables

选出重要的默认显示，其他的可以用户主动选择显示。

Article 3: Not Your Parent's Mobile Phone - UX Design Guidelines For Smartphones

过时了。

Article 4: Overhauling mobile.twitter.com From the Ground Up

Mobile engineering and Design had about nine weeks to design, prototype, develop, test, and calibrate mobile.twitter.com for launch.

步骤：

1. 查看和扩展我们的数据。用户使用刷新和加载更多功能有多频繁？注册和登录的痛点在哪？发的最多的是什么推？推得多频繁？我们使用所有这些动作（actions）的数据来给设计和体系的决策提供信息。
2. 画出主视图和导航的框架草图。
3. 完善草图的细节、任务的交互流（interaction flows for tasks like tweeting,searching, and writing direct messages）。
4. 经过一些 on-paper 迭代，设计和开发团队的审查（review）之后，快速地进行 能玩的 HTML/CSS 线框图制作。
5. 开发主要试图（Home、Connect、Discover 等）。
6. 现在我们有工作的起点（baseline）了，但是我们还需要其他的设计：登录和注册流、注销流、error、notifications、我的账户的子视图（关注者和收藏者之类的）等等。
7. 做以上这些的同时，我们测试（设备清单超过300！）。

tips

Even a simple wireframe of a single view proved extremely valuable in setting the tone for the project. It made the product vision much more concrete and gave us a starting point for front-end work.

再简单的（能玩的）线框图都有超级大的意义。它能使产品远景更实在，而且能给前端一个开始干活的点。

There was a lot to keep track of, and we found that going back to basics and simply printing out designs to post near our workspace helped orient us. It gave the team a quick, easy way to reference designs while we were working, and a way for us to catch inconsistencies.

有很多东西都需要我们持续关注，我们发现打印出设计稿贴到附近就能帮我们别跑偏喽。
干活的时候，这些图能帮我们团队找到设计图，又快又简单，还能让团队成员保持一致（比如设计出的版本v100，程序a做的是v99的、b做的是v98的）～

Change is always difficult because it means, among other things, having to relearn what was once comfortable and familiar. But we hope that the initial pains of readjustment quickly lead you to appreciate this faster, more comfortable and easier-to-use mobile.twitter.com on feature phones and older browsers.

Article 5: Responsive Web Design by Ethan Marcotte

这篇文章普遍被认为是响应式网站设计的开端。