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设计一样，在顶部导航（或者叫“什么也不变