响应式网页设计( RWD ) -"A new paradigm for rich user experience(UX)"

分享于 

14分钟阅读

Web开发

  繁體

传统网页设计综述

网页设计是用户界面开发的核心部分。 它是最终用户以交互方式与系统交互的一种方式。 传统的用户界面是使用旧的网页设计方法构建的,用户体验或者可用性不是。 最终用户只要能够执行业务工作流,就可以熟练使用用户界面导航流程。 JSP。JSF。ASP.NET。PHP是html的顶级语言和UI开发规范。

传统网页设计中缺少的内容?

如果我们看看当前的信息技术世界和可用的最新用户界面规范 below,是一些缺少的参数,。

  • 可用性
  • 实地研究
  • 信息体系结构
  • 界面布局
  • 交互设计( IxD )
  • 数字媒体构件
  • 集思广益协调
  • Prototype制作

响应式网页设计简介( RWD )

响应式网页设计是一种网页设计方法,它专注于丰富的用户体验,并为用户提供最佳的可用性来查看网站。 用户通过轻松阅读,最小滚动和 LESS 调整大小来导航响应式网站。

响应式网页设计最适合

  • 台式计算机
  • 平板( 小选项卡和大选项卡)
  • 智能移动电话

基于Responsive的网站设计可以在所有从到1680px的解决方案上最好的可见。 响应性网站根据每个设备类型,根据查看环境 换句话说,调整屏幕布局。 如桌面上的设备在屏幕上显示多个选项卡,但在智能手机上看到相同的多个。 在另一个用例中,桌面设备上的多个图像可以成为 carousel 组件,以显示像平板电脑或者iphone等较小分辨率设备上的所有图像。

为什么我们需要响应式网页设计( RWD )

"未来 web Mobile Mobile Mobile world世界迅速地改变,随着智能设备的大量使用而迅速变化。 智能手机和平板电脑是全球通用的设备。 根据调查,我们中的51%人使用智能手机。 其他国家已经观察到相同的趋势。 每个人都想在智能手机和手持设备上访问他们的应用。

行业迅速向应用程序转换过渡。 传统或者传统网站以及客户面对的UI应用程序向智能设备。 Android应用,iOS应用,Windows 应用现在是任何信息技术转换的一部分。 银行。金融。保险。零售。能源。医药和其他垂直市场已经开始向响应性。 用户体验和可用性成为企业成功运营业务的一个重要方面。 我们不能忽略它的重要性。 所以我们也在这里找 RWD。

今年世界上有超过 4.3亿人将使用手机。 更令人惊讶的是,eMarketer,eMarketer预测手机用户在全球范围内的数量超过。

aaa

来源:http://www.statista.com/chart/1517/worldwide-mobile-phone-users/

响应网页设计原则

响应性网页设计遵循 below 核心原则:

  • 移动第一种方法

创建基本网站并增强它为智能电话和个人电脑。

  • 基于浏览器。设备或者特征检测的渐进增强

-Using框架。

  • 断点标识

-Xs,Xm,基于设备大小的等等。

  • 设备类型内容呈现

-Render为多个设备提供相同或者不同的内容。

响应式网页设计公式

如何实现响应式网页设计?

响应式网页设计( RWD ) 实现基于一些关键功能。 below 是需要解决的特性,以使设计能够响应。

流体,基于比例的网格

流体网格概念是根据页面元素大小调整网格列大小的比例。 它应该是 relative 单位,如百分比,而不是像像素或者点那样绝对单位。 基于比例的网格也称为灵活布局。 这些 relative 长度或者单位用于声明公共网格属性值,如它的宽度。margin 和 padding 等。

灵活的图像

以 relative 单位定义图像尺寸,以便我们可以确保它始终显示在可用的大小内。 可以防止图像显示在它的包含屏幕元素区域之外。 我们可以在网站上的所有图片上设置 100%的max-width。

代码


img {


 max-width: 100%; ( /* max image widget based on device/browser size */)


 }



使用 上面 样式不仅在本机宽度上呈现并溢出它的包含框,而要求的图像在它的宽度不超过父容器宽度。 我们也可以使用RWD框架提供的特定风格来作出响应。 比如 类 Twitter Bootstrap 响应可以用于灵活的图像。

对于大多数嵌入式视频,我们可以使用 below 样式:





img 


{


 object { /* object type is a media over here */


 max-width: 100%; ( /* max widget based on device/browser size */)


}



的CSS3媒体查询&屏幕分辨率

CSS3提供丰富的媒体查询支持。 媒体查询允许网站页面根据与它关联的媒体规则使用不同的CSS样式表。 媒体规则可以根据设备类型和屏幕大小定义。 它还将考虑浏览器的宽度。 viewport或者设备方向( 横向/纵向)的宽度是应用媒体查询时使用的一些关键参数。

语法:"@media规则": 它为不同媒体类型/设备定义不同风格的媒体规则。

  • 在以前的版本( CSS2 ) 中,我们调用它: 媒体类型"
  • 在最新版本( CSS3 ) 中,我们称之为: 媒体查询"


<!-- CSS media query on a link element -->


<link rel="stylesheet" media="(max-width: 960px)" href="custom.css" />


<!-- CSS media query within a stylesheet -->


<style>


 @media (max-width: 640px) {


 .facet_sidebar {


 display: none;


 }


}


</style>







@media only screen and (max-width: 580px) {


. gridmenu {


 width:100%;


 }



. gridmain {


 width:100%;


 }



. gridright {


 width:100%;


 } }



注释 :当媒体查询为 true 时,将应用相应的样式表或者样式规则。

响应网页设计的代码示例

基本代码结构

步骤:1

我们可以轻松地开始创建响应式设计,添加一些基本规则到你的HTML网站的CSS样式表中。 首先,我们需要将"viewport元标记"添加到HTML页面的<head> 部分。 它告诉浏览器以完全大小显示页面,而不是缩放页面:


<meta name="viewport" content="width=device-width, initial-scale=1.0" />



使用 上面 标记,我们确保较小的设备不会扩展内容。

步骤:2

下一步是添加CSS代码,使用CSS3媒体查询控制这些小屏幕场景中的显示。

在CSS样式表中只使用 @media 屏幕代码。 以下是一个示例:





[__strong__]/* -----------Smartphone View----------- */ 

@media only screen and (max-width : 480px) {
 /* All your smartphone rules go inside here */}/* -----------Tablet View----------- */@media only screen and (max-width : 768px) {
 /* All your tablet rules go inside here */}/* -----------Desktop View----------- */@media only screen and (max-width : 1280px) {
 /* All your desktop rules go inside here */}

在 Twitter Bootstrap 3中创建响应式映像的? below 是示例代码


<div class="col-md-4 col-sm-4 col-xs-12">



 <div class="customer"> 



 <div class="customer-img">



 <img class="img-responsive" src="img/show-customer.jpg" alt="" />



 </div>



 </div>



</div>



设备和标准 viewport

下面是设备和viewport的标准列表。 仅用于 viewport refererence

设备类型

标准 Viewport

缩减至

桌面

1600x992px

小数位数( 0 3181 )

笔记本电脑

1280x802px

小数位数( 0 277 )

平板

768x1024px

小数位数( 0 219 )

手机

320x480px

小数位数( 0 219 )

如何测试响应式网页设计?

现在,我们可以使用像智能手机,平板电脑等手持设备来测试响应式设计,但是我们甚至可以使用 RWD测试模拟器来测试 RWD。 模拟器允许我们在多个设备上测试多个分辨率。 可以使用 below 仿真器。

关于响应式网页设计的行业观点?

针对响应式网页设计的Gartner视图

"按"尽管它有局限性,响应式网页设计使许多组织可以移动到一个统一的网络通道。"报告

源:https://www.gartner.com/doc/2571622/despite-limitations-responsive-web-design

Responsive Forrester Responsive网站设计

Forrester Forrester Forrester Forrester的一份新报告称,"As的responsive responsive responsive设计的哲学代表了多触点网页设计的未来路线。 "了解响应设计"建议到响应设计的道路包含它的颠簸,目标是值得努力。"

源:http://www.cmswire.com/cms/customer-experience/forrester-responsive-design-represents-future-of-multitouchpoint-web-design-016786.php#null

Google认为 ?

谷歌说,如果你的网站使用响应式设计进行编程,那么对你的内容编制索引是更容易和更高效的。 我们说它更容易,因为单个URL上的内容可以在任何类型的设备上访问和共享。 它不需要不同的url或者HTML应用程序。 这就是为什么我们从 2011年开始在客户网站上应用响应设计。

源:http://www.wsiwebspecialist.com/the-webspecialist-blog/google-officially-endorses-responsive-design

福布斯电子商务营销清单

"移动友好的网站不再仅仅是重要的,它是至关重要的。"

来源:http://www.forbes.com/sites/brentgleeson//ecommerce-marketing-checklist-for-2013/

卫报新闻 &

随着手机和平板电脑的使用不断增长,人们阅读的设备和屏幕尺寸也在不断地增长,这些设备和屏幕尺寸也在不断增长。 我们自己的移动通讯每年增长了 63%年。"。

来源:http://www.theguardian.com/gnm-press-office/guardian-rolls-out-new-responsive-mobile-site-following-beta-trial

响应网页设计的优势

可用的框架 响应式网页设计

有很多框架可以用于响应设计实现。 below 是我们可以用来构建响应式网站的一些顶级RWD框架。

具有响应式网页设计的Challanges

有很多challanges有响应性的网页设计实现。 有些时候,随着许多设备。浏览器和分辨率的增加,它变得更加复杂和复杂。 我们从安卓,ios,黑莓和 Windows 操作系统中获得超过 100的设备,处理来自 220px 至 1600px的设备是一个大交易。 below 是我们需要处理的一些主要的challanges

顶级响应网站

https://www.barackobama.com/

http://magazine.rolexawards.com/

http://picasa.google.com/

http://www.google.com/about/

http://www.starbucks.com/

http://www.salesforce.com/

http://disney.com/

http://time.com/

http://www.eurosport.fr/

摘要

基于 上面 细节,我们可以继续实现响应性的网页设计( RWD )。 我们可以使用可以用的with框架来减少开发时间和工作,也可以使用purequery媒体查询和jQuery脚本支持。 框架为我们提供了更多的灵活性和可以重用性,同时还提供了多个现成的UI小部件和组件。 我们还应该首先基于业务需求解决第一种或者台式的移动。 面向对象的设备。浏览器支持也是响应性网页设计中的关键属性。 断点选择应始终根据已经定义的业务范围进行优化。

引用

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

http://www.slideshare.net/TirtheshGanatra/responsive-web-design-headstart-techtalks

http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

http://en.wikipedia.org/wiki/Responsive_web_design

http://webshopmanager.com/n-9447-5-benefits-of-responsive-web-design.html

http://www.thebyte9.com/news/responsive-web-design-what-can-it-do-for-your-business

http://www.statista.com/chart/1517/worldwide-mobile-phone-users/


相关文章