Quote

响应式设计移动优先原则(mobile first)

起初,响应式设计以桌面版为重点,并自适应小屏幕尺寸,如缩小图片,隐藏不必要内容。而最近一种创新的移动优先的响应式设计方式开始悄然流行。

相比从大的、臃肿的桌面版开始设计并不断缩小、丢弃内容以适应小屏幕设备,从移动优先显得更有意义。移动优先有个很重要的优势,就是你可以将注意力集中在网页的核心内容,也就是内容优先,无需将精力分散在侧边栏那些不是必不可少的元素上。

“At first, responsive design was applied to existing desktop-centric websites to allow the layout to adapt to smaller screen sizes. But more recently it has been combined with another innovative approach called mobile first.

Rather then starting with the big, bloated desktop site and then scaling down for smaller devices, it makes more sense to start with the constraints of the small screen and then scale up for larger viewports. Using this approach, your layout grid, your large images and your media queries are applied on top of the pre-existing small-screen design. It’s taking progressive enhancement to the next level.

One of the great advantages of the mobile-first approach is that it forces you to really focus on the core content of your page. It might be more accurate to think of this as a content-first approach. You don’t have the luxury of sidebars or multiple columns to fill up with content that’s just nice to have rather than essential.”

关于响应式设计

响应式网页设计responsive web design(RWD)的流行已经有挺长一段时间了,过去的2012年,响应式设计已深入人心,2013年仍是网页设计的一大热门并且是将来的一种趋势。当用移动设备浏览网页看到的是普通电脑缩小版的网页并且无法使用阅读器时,多数人通常的做法是直接离开。关于响应式设计研究的文章不尽其数,比如前端观察的响应式网页设计这篇文章,是我认识响应式设计的第一篇文章,介绍得比较全面。Web designer wall 三步实现响应式设计教你快速入门。

由于工作需要,自己也做了一些响应式的web app,公司的开发模式属于快速开发,于是2012年中旬开始认识响应式设计的我目前对它的研究并不深,只是在工作中碰到不少问题,面对这些问题,google是个不错的选择,不知是否搜索技巧有问题,总觉得找的答案并不恰恰就是我想要的,于是决定把一些问题和解决方案及从别人那里学到的有用的小经验分享出来,希望能获得更大的进步。

实现响应式的网页,我主要依赖于css3的Media Queries, 虽说一些人痛恨Media Queries, 也有人提出,响应式设计不应该只是Media Queries(还有图片处理技术<img srcset>和<picture>),但不得不承认,这几乎是我展开工作的全部。

一般响应式网页设计会有一个基础html框架: header, navigation, content, aside, footer. 作为响应式设计,其核心是根据屏幕尺寸保留网页主要内容(content),相应隐藏其他非重要内容,以保证网站内容的可读性(个人意见)。而一个web app,设计感更浓重,图片更多更大,其响应的难度要远远大于一个博客式的website。

1.字体。

web app要求内容的趣味性,设计师通常会使用一些与设计风格相匹配的字形(而这些字体通常不是google web font),如果目标用户非移动用户,这个可以用图片来解决(css sprite),但如果需要一个responsive的web app,这是个非常糟糕的选择。css sprite对其背景定位和大小尺寸需要相当准确,无法适应对尺寸要求极度宽松的响应式,并且多而大的图片对加载速度影响很大。因此,建议使用google web font(上面有很多漂亮的字形,限英文)或系统默认字体。当然也有嵌入字体只说,但如果是中文,可要考虑字库大小哦~

对于字号,应至少设置为14px,通常网页上的12px在移动设备上浏览还是有些吃力的。

2.图片。

对于背景图的设计,应尽量使用可以平铺的小图案,或者规律的渐变,这些渐变可以用css3来实现,也可以使用那些即使被切掉也无关紧要的图片,以减少屏幕尺寸变换时对图片的频繁切换。

3.导航。

导航在引导用户浏览网站或者app中起着非常重要的作用,除了导航数量少,字数简短的情况下,一般导航在电脑版切换到移动版时,需要更适合的UI。这里教你如何创建合适的响应式导航。

4.移动应用的特性:touch。

不同于website, web app 在手机上的需求更高,例如浏览一个图片slider,网页上通常通过点击左右键来切换图片,而在手机上,左右滑动的手势更符合用户习惯,因此可以选择一些响应式的jquery插件,例如FlexSlider

5.禁止缩放。

<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ name=”viewport”>

width                      – viewport的宽度

height                     – viewport的高度

initial-scale          – 初始的缩放比例

minimum-scale  – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable       – 用户是否可以手动缩放

6.IOS中Safari允许全屏浏览。

<meta content=”yes” name=”apple-mobile-web-app-capable”>

7.IOS中Safari顶端状态条样式

<meta content=”black” name=”apple-mobile-web-app-status-bar-style”>

content=”black”即设置为黑色。

8.忽略将数字变为电话号码

<meta content=”telephone=no” name=”format-detection”>

9.IOS中Safari设置保存到桌面图标

<link rel=”apple-touch-icon” href=”custom_icon.png”>

添加到主屏幕UI:图标参考:

图标会自动添加高亮效果,如果不需要,可以在plist中明确指定UIPrerenderedIcon的键值去掉

57像素的普屏的iPhone图标,图标圆角的半径为10像素

114像素Retina屏的iPhone图标,图标圆角的半径为20像素

512像素的用于iTunes/App Store的图标,在实际显示是会被缩放到175像素进行显示(但提交是不可以提交175像素)

72像素的普屏iPad图标,图标圆角的半径为13像素

144像素Retina屏iPad图标,图标圆角的半径为26像素

50像素iPad的Spotlight搜索图标的最终视觉大小是48像素,原因是iOS会对图标的每个边去掉1个像素,添加阴影效果

100像素Retina屏的Spotlight搜索图标的最终视觉大小是96像素,原因同上,这次是每边减2个像素

10.关闭Input键盘默认首字母大写

autocapitalize=”off”

例如: <input type=”text” value=“” name=”” autocapitalize=”off” />

根据需要设置,因为有一些输入框还是需要首字母大写的,如姓名。

11.去除Android平台中对邮箱地址的识别

<meta content=”email=no” name=”format-detection” />

12.-webkit-box-sizing

在 移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元 素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像 素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊 的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。

13.禁止iphone字体大小调整

html { -webkit-text-size-adjust: none; }

14.图片在retina高清屏下的显示

为了保证图片在retina下的高清显示,需要准备一张原始图和一个比原图大一倍的图。

 image{ background-image:url( image_url );/*用于普通屏幕*/
/* ———— Retina ———— */
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
only screen and (min–moz-device-pixel-ratio: 2),        /* Firefox 16 之前 */
only screen and (-webkit-min-device-pixel-ratio: 2),    /* Webkit */
only screen and (min-resolution: 240dpi),                    /* 标准 */
only screen and (min-resolution: 2dppx)                      /* 标准 */
{
image{
background-image:url( image_url );
background-size: 50% 50%;
}
}
另外,无图片(no images)是开发的趋势,圆形,三角,渐变,阴影,如果是移动应用开发,请把它们变成css代码,因为它的灵活性足够适应不同尺寸的屏幕并且图像质量不会下降。