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

Lesson 3: The Amazing New Mobile Web的更多相关文章

  1. front end about mobile web techs

    WEB OF DEVICES http://www.w3.org/standards/webofdevices/ MOBILE WEB http://www.w3.org/standards/webd ...

  2. Mobile Web中URL设计问题

    自己虽然也注册了CSDN账号,但是没有在上面发表过博客等内容.不过经常在Google里面搜索相关内容时,会显示csdn的结果.这也说明国内很多IT人员都会在CSDN发表博客,记录解决问题过程或者想法. ...

  3. swipe.js 2.0 轻量级框架实现mobile web 左右滑动

    属性总结笔记如下: <style> .swipe { overflow: hidden; //隐藏溢出 清楚浮动 visibility: hidden; //规定元素不可见 (可以设置,当 ...

  4. Mobile Web调试工具Weinre (reproduce)

    Mobile Web调试工具Weinre 现在.将来,用移动设备上网越来越成为主流.但对于开发者们来说,移动web的调试一直是个难题,前期可以使用模拟器来协助调试,但到了真机调试阶段就让人非常头痛.而 ...

  5. 打造离线使用的Mobile Web App

    最近公司举办技术大赛,我和同事一起制作了一个叫做10K Hours的Mobile Web App,可以帮助你通过一万小时的努力,成为某个领域的专家.正好前段时间翻译了一本书<HTML5 Mobi ...

  6. Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web

    https://googleblog.blogspot.com/2015/10/introducing-accelerated-mobile-pages.html October 7, 2015 Sm ...

  7. 开发库比较(3) - Mobile Web 开发 - Sencha, jquerymobiel, phonejs, jqtouch, jqmobi

    我们一直坚信Html/css在界面上最终会一统江湖,因为在众多的界面编写中,qt,gtk,wpf,win form, wxwidgets等等,只有Html/CSS是真正拥有统一标准,只有这个有潜力作用 ...

  8. Mobile Web开发 处理设备的横竖屏

    为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间.由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的 ...

  9. 13 Reasons Why You Should Pay Attention to Mobile Web Performance

    Mobile is no longer on the sidelines. If you’re not already thinking mobile first, you should at lea ...

随机推荐

  1. php中文件引入require

    ./ 表示当前层 ../表示向上一层 php中好像不能像asp那样,用 “/” 表示根目录,但可以用$_SERVER['DOCUMENT_ROOT'] 表示网站根目录 引用分为三种: 上级对下级的引用 ...

  2. python百科

    Python 编辑词条 添加义项名 B 添加义项 ? Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第 ...

  3. Gnuradio 实验二

    今天根据教程做了实验二 要到了两个新的模块 一个是 FFT SINK, 其作用是按频谱输出信号. 另外一个就是 GUI Notebook ,起作用就是可以将SCOPE SINK 和 FFT SINK ...

  4. HTML5做手机站页面字体显示很小的解决方法

    HTML5做手机站需要加上一部分代码,不然字体会显示很小的,经历了很久的不解才发现的,希望给大家一些帮助 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD ...

  5. django + nginx + raspberypi + pidaro

        对于一个从事后台开发的人来说,搞了个网站,我自己都觉得有点意外.不是很懂html,不是很懂css,不是很懂js,不是很懂web开发模式/框架,不是很懂httpd/nginx--,web的东西样 ...

  6. iso18092-2004中ISO14443,Felica的关系

    ISO18092协议介绍了P2P通讯中的ACTIVE模式和PASSIVE通讯模式,其实ISO18092使用了ISO14443协议和非国际标准的FELICA通讯协议,这里总结了一下.

  7. linux shell 终端中文乱码(转)

    方法一:修改/etc/sysconfig/i18n 文件把里面的LANG="en_US"改成 GB2312就可以了要重启一下机器不用重启的方法,直接# LANG="GB2 ...

  8. 使用getGenericSuperclass()和getActualTypeArguments()将DAO做成泛型

    一.getGenericSuperclass()和getActualTypeArguments()基本用法: import java.lang.reflect.ParameterizedType; p ...

  9. Disabling Clang Compiler warnings

    开发中,经常需要禁止编译器提示某些warnings,下面是典型场景和 1,使用CocoaPods时,引用的其他人开发的Pods中包含warnings. 2,直接引用其他人写的源代码时,包括通过直接导入 ...

  10. USB Loader使用心得之游戏名称、简介、背景音乐

    我在<WAD独立安装版USB Loader的下载和安装>(链接:http://www.cnblogs.com/duxiuxing/p/4255124.html)开头提到:“任何版本的USB ...