http://www.sitepoint.com/understanding-responsive-web-design-cross-browser-compatibility/

In the last article, I described three ways to work with with images from a responsive design standpoint, discussing the best solution to adopt while serving properly-sized imagery to a variety of screen sizes. In today’s article, I’ll focus on imagery management from another point of view, that iscross-browser compatibility.

During the creation of a website — especially if your aim to make its structure responsive — one of the most important and frequent problems that a web designer has to face involves cross-browser compatibility, that is, compatibility across different browsers.

What does “compatibility” stands for? The designer of a website must ensure that their design works properly and that its appearance is error-free and functional on any platform used to view it. It ‘s definitely one of the most complicated and frustrating aspects you must consider when designing a new project, but it’s essential that the you do not leave anything to chance and keep cross-browser compatibility in mind throughout the design process.

Many of the new CSS capabilities introduced in the new CSS3 version are still not widely supported by all major browsers. In fact, some are not recognized and therefore ignored completely, which can pose major problems if your design relied on unsupported CSS. It’s not just a variety of browser types either; different versions of the same browser can support (or fail to support) various design techniques, which complicates cross-browser compatibility even further.

Let’s get back to image management, which probably is the weak point of the RWD approach, especially for browser compatibility issues. Photos and media need to be flexible and adapt to different devices, and at the same time, it’s crucial that they don’t slow down page loading in the process. Therefore, there is still no definitive, ideal solution to problems such as different screen sizes, restricted bandwidth (in cases of mobile browsing), performance on high-resolution (“retina”) displays, and so on.

It is clear that using a single image (the largest possible version) for all devices is not an advisable solution. Think about the time a poor smartphone-2G user would take to load your design. After your ultra-slow image loads, those high-resolution images will probably display at about one quarter of their original size.

The largest problem is that media queries do not work with older browsers. Consequently, a responsive web page with many CSS3 rules applied can be seen correctly only by those who have recently-updated browsers with strong CSS3 support. Fortunately, there are three JavaScript solutions that can help us serve responsive websites to older browsers lacking CSS3 support: Respond.jsModernizr, and adaptive.960.js. Let’s have a look together.

Respond.js

The first solution is also the simplest one — I’m talking about a script called respond.js, which enables the older browser versions to understand and execute CSS3 media queries. Here’s all it takes to get started.

1
<script type="text/javascript" src="js/respond.min.js"></script>

This script is called on the page (as shown above) and adds support to media queries, min-width, max-width, and all media types (e.g. screen) for older browsers. This script can help your CSS3 instructions work properly, even for older browsers.

Respond.js may seem like it’s too easy to be an ideal solution, but for many projects this is an great solution because the code is read from the latest CSS3 PC browser and all browser designed for smartphones. The sole purpose of the script is to make older browsers read the CSS3 instructions within media queries. Nothing more, nothing less.

Modernizr

The second solution is the use of a tool called Modernizr. As explained in the documentation page of its website, “Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications.”

Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is—very simply—tells you whether the current browser has this feature natively implemented or not. This is an indispensable tool that gives you fine control over the experience through JavaScript-driven feature detection.

After the first phase of detecting features, Modernizr creates a JavaScript object with the results and adds classes to the HTML element for you to target with your CSS. It’s a gorgeous solution, because it makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not.

Modernizr supports these browsers: IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome, Mobile Safari, Android WebKit browser, Opera Mobile, and Firefox Mobile.

You can download the full version of the library and implement it according to your specifications. However, if you only needs to test the compatibility of CSS3 in your browser, you can set the various options offered by the library and create your own compressed code. Paste the code into an external .js file and include it at the tag of your HTML document. The Modernizr team recommend to include the library just after importing CSS.

You should have this code:

1
2
3
4
5
6
7
8
<!DOCTYPE html>
 <head>
  <title>Your title</title>
  <script type="text/javascript" src="modernizr-latest.js""></script>
 </head>
 <body>Your content</body>
</html>

Now you have a JavaScript library that indicates you whether the CSS3 or HTML5 functions you used are supported or not. Let the page run on the browser and look at the code with Chrome developer tools or Firebug.

You should see something like this:

1
2
3
<html class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase no-indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage no-borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio no-localstorage no-sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
....
</html>

adapt.960.js

The third solution that we consider is very different from the previous two, especially because it does not make use of CSS3 and accordingly of media queries. However, the concept is very similar to the CSS3 media queries.

If we use CSS3 in a single file, this library requires us to separate the code into several CSS files, one for each device type. The library parses the resolution of the device and calls the CSS designed for that specific screen resolution.

We can download the script and see immediately how it works. Activate the library on your page with the following line:

1
<script type="text/javascript" src="js/adapt.min.js"></script>

Then, copy the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
var ADAPT_CONFIG = {
 // Where is your CSS?
 path: 'assets/css/',
 
 dynamic: true,
 
 callback: myCallback,
 
 range: [
   '0px    to 760px  = mobile.css',
   '760px  to 980px  = 720.css',
   '980px  to 1280px = 960.css',
   '1280px to 1600px = 1200.css',
   '1600px to 1920px = 1560.css',
   '1940px to 2540px = 1920.css',
   '2540px           = 2520.css'
 ]
};
</script>

We see the list of CSS files within the “range,” one for each group of resolutions. Each of these files contains CSS properties related only to a specific device, just as the code enclosed within the CSS media queries.

The common CSS—that is the CSS that should apply to all screen sizes—should be included in a different CSS file, which for convenience we can call master.css and retrieve it before the integration of this library, just like normal CSS file:

1
<link href="assets/master.css" rel="stylesheet" type="text/css" media="screen" />

Conclusion

Which of the three solutions should we adopt? They are all valid, sensible approaches. If you choose to apply the first solution (respond.js), you’ll have to write and manage a single CSS file, unlike adapt.960.js, which requires multiple CSS files. Finally, if you choose to try Modernizr, you’ll take advantage of new CSS3 capabilities in the browsers that can support them and still have easy and reliable means of controlling the situation for the browsers that cannot.

If you believe that, within few years, older browsers will be irrelevant and that mobile browsers will supersede their desktop counterparts, I believe that it is better to work with media queries and extend support for older browsers with JavaScripts plugins that are available.

Remember that there are also web-based services to test a responsive website and simulate resizing of the browser window. Two of these are responsive.is, which is very easy to use, and studiopress.com, which, after entering the web address, makes different views of your website appear side-by-side.

In addition to web-based solutions, there are also applications that can be installed directly on your personal computer. Among them, we find Opera Mobile Emulator, which is available for Mac, Linux, and Windows. After installing and opening the application, you’ll have a list of devices that it can emulate (with the unfortunate exception of Apple devices).

To conclude this article, I’d like to share a very useful online tool to test the compatibility of your live website:crossbrowsertesting.com. You must choose an operating system and a web browser, and that’s all. A series of well-organized screenshots on multiple browsers will allow you to have a complete view of your site, and in this way, it will be easier to understand on which elements you should modify to make your project perfectly compatible with any platform.

Want to learn more about Responsive Web Design? Check out SitePoint’s new book, Jump Start Responsive Web Design!

Understanding Responsive Web Design: Cross-browser Compatibility的更多相关文章

  1. 转:15 Best Responsive Web Design Testing Tools

    Responsive Web Design is regarded as being the approach which suggests that web design and developme ...

  2. Responsive web design 学习笔记

    Advanced Styling with Responsive Design 此笔记为Coursera同名课程笔记. Week1 什么是响应式设计? 响应式设计: It is designing y ...

  3. 自适应网页设计(Responsive Web Design)

    引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...

  4. 响应式Web设计(Responsive Web design)

    中文名 响应式Web设计 提出时间 2010年5月 英    文 Responsive Web design 解    释 一个网站能够兼容多个终端 目    的 解决移动互联网的浏览 优    点 ...

  5. 自适应网页设计(Responsive Web Design)(转)

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  6. (转)自适应网页设计(或称为响应式web设计)(Responsive Web Design)

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  7. 自适应网页设计(Responsive Web Design)(转)

    作者: 阮一峰 出处:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移 ...

  8. 阮一峰:自适应网页设计(Responsive Web Design)别名(响应式web设计)

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  9. [转]如何设计自适应屏幕大小的网页 Responsive Web Design

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

随机推荐

  1. POJ 1159 - Palindrome (LCS, 滚动数组)

    Palindrome Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 55018   Accepted: 19024 Desc ...

  2. select选项框特效

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. Jersey(1.19.1) - Extracting Request Parameters

    Parameters of a resource method may be annotated with parameter-based annotations to extract informa ...

  4. 数据库SQL优化大总结之百万级数据库优化方案

    网上关于SQL优化的教程很多,但是比较杂乱.近日有空整理了一下,写出来跟大家分享一下,其中有错误和不足的地方,还请大家纠正补充. 这篇文章我花费了大量的时间查找资料.修改.排版,希望大家阅读之后,感觉 ...

  5. NSURLSession的使用(1)

    一.创建一个Session,并且对其进行初始化 包含三种创建方式:   1.+ (NSURLSession *)sharedSession  单例模式 2.+ (NSURLSession *)sess ...

  6. PHP学习笔记 - 进阶篇(1)

    PHP学习笔记 - 进阶篇(1) 数组 数组定义 $arr = array();表示创建一个空数组,并把创建的空数组赋值给变量$arr. 索引数组初始化 PHP有两种数组:索引数组.关联数组. 索引和 ...

  7. 使用edgesForExtendedLayout遇到的麻烦

    今天在写一个多界面之间来回返回的工程时,遇到的问题,建了两个类:FirstViewController 和 ButtonViewController. 由 FirstViewController 进入 ...

  8. 有道单词本添加js实现自动阅读单词

    个人比较习惯使用有道,使用了一段时间,背单词的时候很不方便   而有道单词客户Duan没有自动阅读的功能,  本菜用强大的js实现了简单的自动下一个单词的功能, 方法:第一步打开有道路径下的" ...

  9. Git 的简单使用

    一直在使用Git,仅限于简单的使用,但还是记不住几个简单.在这边总结一下,加深印象,也方便查找. 安装Git 平常主要在windows和ubuntu上工作,就以windows为例,Linux和Mac平 ...

  10. mybatis like 查询

    SELECT * FROM user WHERE name like CONCAT('%',#{name},'%')