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
- 移动设计工作流
- Information Architecture
- Interaction Design(wireframe)
- Design(设计不是装饰,装饰也不是设计)
- 响应式设计工作流
- Content Inventory – establish and describe the content. This gives you your raw materials
- Content reference wireframes – establish rough responsive wireframes in HTML. Allows for really fast iterations.
- Design in text (structured content) – establishes content hierarchy and structure. Easily revisable.
- Linear Design – Test out the plain jane structured content in HTML in the browser.
- Breakpoint graph – display visually where the breakpoints happen
- Design for various breakpoints – Start with the small screen first, then expand until it looks like shit. TIME FOR A BREAKPOINT!
- 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
- 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.
- Present prototype after revisions – Once revisions have been made, you can show the design in action
- Document for production – Deliver a style guide along with the production code.
- 移动设计工作流
- responsiveprocess.com
- Discovery
- Design
- Development
- Deployment
导航(Navigation)
如果和一般的web设计一样,在顶部导航(或者叫“什么也不变
Lesson 3: The Amazing New Mobile Web的更多相关文章
- front end about mobile web techs
WEB OF DEVICES http://www.w3.org/standards/webofdevices/ MOBILE WEB http://www.w3.org/standards/webd ...
- Mobile Web中URL设计问题
自己虽然也注册了CSDN账号,但是没有在上面发表过博客等内容.不过经常在Google里面搜索相关内容时,会显示csdn的结果.这也说明国内很多IT人员都会在CSDN发表博客,记录解决问题过程或者想法. ...
- swipe.js 2.0 轻量级框架实现mobile web 左右滑动
属性总结笔记如下: <style> .swipe { overflow: hidden; //隐藏溢出 清楚浮动 visibility: hidden; //规定元素不可见 (可以设置,当 ...
- Mobile Web调试工具Weinre (reproduce)
Mobile Web调试工具Weinre 现在.将来,用移动设备上网越来越成为主流.但对于开发者们来说,移动web的调试一直是个难题,前期可以使用模拟器来协助调试,但到了真机调试阶段就让人非常头痛.而 ...
- 打造离线使用的Mobile Web App
最近公司举办技术大赛,我和同事一起制作了一个叫做10K Hours的Mobile Web App,可以帮助你通过一万小时的努力,成为某个领域的专家.正好前段时间翻译了一本书<HTML5 Mobi ...
- 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 ...
- 开发库比较(3) - Mobile Web 开发 - Sencha, jquerymobiel, phonejs, jqtouch, jqmobi
我们一直坚信Html/css在界面上最终会一统江湖,因为在众多的界面编写中,qt,gtk,wpf,win form, wxwidgets等等,只有Html/CSS是真正拥有统一标准,只有这个有潜力作用 ...
- Mobile Web开发 处理设备的横竖屏
为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间.由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的 ...
- 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 ...
随机推荐
- php中文件引入require
./ 表示当前层 ../表示向上一层 php中好像不能像asp那样,用 “/” 表示根目录,但可以用$_SERVER['DOCUMENT_ROOT'] 表示网站根目录 引用分为三种: 上级对下级的引用 ...
- python百科
Python 编辑词条 添加义项名 B 添加义项 ? Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第 ...
- Gnuradio 实验二
今天根据教程做了实验二 要到了两个新的模块 一个是 FFT SINK, 其作用是按频谱输出信号. 另外一个就是 GUI Notebook ,起作用就是可以将SCOPE SINK 和 FFT SINK ...
- HTML5做手机站页面字体显示很小的解决方法
HTML5做手机站需要加上一部分代码,不然字体会显示很小的,经历了很久的不解才发现的,希望给大家一些帮助 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD ...
- django + nginx + raspberypi + pidaro
对于一个从事后台开发的人来说,搞了个网站,我自己都觉得有点意外.不是很懂html,不是很懂css,不是很懂js,不是很懂web开发模式/框架,不是很懂httpd/nginx--,web的东西样 ...
- iso18092-2004中ISO14443,Felica的关系
ISO18092协议介绍了P2P通讯中的ACTIVE模式和PASSIVE通讯模式,其实ISO18092使用了ISO14443协议和非国际标准的FELICA通讯协议,这里总结了一下.
- linux shell 终端中文乱码(转)
方法一:修改/etc/sysconfig/i18n 文件把里面的LANG="en_US"改成 GB2312就可以了要重启一下机器不用重启的方法,直接# LANG="GB2 ...
- 使用getGenericSuperclass()和getActualTypeArguments()将DAO做成泛型
一.getGenericSuperclass()和getActualTypeArguments()基本用法: import java.lang.reflect.ParameterizedType; p ...
- Disabling Clang Compiler warnings
开发中,经常需要禁止编译器提示某些warnings,下面是典型场景和 1,使用CocoaPods时,引用的其他人开发的Pods中包含warnings. 2,直接引用其他人写的源代码时,包括通过直接导入 ...
- USB Loader使用心得之游戏名称、简介、背景音乐
我在<WAD独立安装版USB Loader的下载和安装>(链接:http://www.cnblogs.com/duxiuxing/p/4255124.html)开头提到:“任何版本的USB ...