游戏邦在:
杂志专栏:
gamerboom.com订阅到鲜果订阅到抓虾google reader订阅到有道订阅到QQ邮箱订阅到帮看

移动网页应回避的4个响应式设计误区

发布时间:2013-04-02 17:27:07 Tags:,,,,

作者:Igor Faletski

在不久以前,多数人还是使用同个设备——桌面电脑访问网络。在2006年,有两种屏幕尺寸占据了77%的网络使用率。

但现在这种模式已经发生转变。我们的调查发现,今年有8种屏幕尺寸(游戏邦注:包括多种台式电脑、智能手机、平板电脑、监视器、连网电视和笔记本)占据了77%的网络使用率。更值一提的是,没有哪一种规格的屏幕所占市场份额能够超过20%。今天,我们必须面向各种型号的设备开发内容。

在这个多屏幕的世界中,响应式设计就是让智能手机和平板电脑用户获得与桌面电脑用户一样丰富网络体验的关键。响应性已经成为网页设计师和开发者的宠儿,并迅速成为创建新网站的主要途径。响应式设计工作流也已成为针对不同屏幕规格创建定制化网页体验的最有效方法之一。

但响应性设计并非万能丹。它也许可以解决屏幕大小布局的问题,但这一方法还存在许多开发者所忽略的根本问题。以下是可能影响你的响应式项目的4个常见误区:

responsive-web-design(from instantshift)

responsive-web-design(from instantshift)

误区1:响应式网站资源超载。

Mobify公司分析了15家名列前茅的电子商务供应商的响应式网站,其数据显示平均每个主页使用了87.2个资源,包含1.9MB数据。这些数据之所以如此庞大,原因在于它们需要一起指示网页如何在一系列不同设备和屏幕尺寸

上进行渲染。那么当你的响应式网站需要在网站渲染前加载87种资源时,又会发生什么情况?加载速度减缓。

毋庸质疑,我们都很讨厌等待网站加载。当智能手机用户被迫多等一秒时,其转化率就会下降3.5%。多等待三秒,就有57%的用户会离开你的网站。

为提升响应性网站运行表现,确保只向用户的智能手机、平板电脑和桌面电脑发送一种必需资源。你可以使用SASS(针对CSS压缩)和Uglify(针对JavaScript压缩)等工具压缩和连结JavaScript、CSS资源,或者使用Mobify的自动化JavaScript、CSS加速工具。

误区2:图片过度渲染

图片展示是一大响应式设计问题。响应式网站在多个设备上使用的是同个标记,那你如何确保它会在Retina的iPad屏幕上显示出大张的美丽图片,在旧款智能手机上则呈现低分辨率、加载更快的图片呢?

对于图片较多的网站,页面在移动设备上的运行表现可能影响到转化率。另外,向错误的设备发送大型图片所浪费的带宽成本,实际上无异于烧钱。

好消息就是这里仍有一些现成的解决方案,可用于针对所有屏幕尺寸和分辨率动态地优化图片,其中包括Mobify所提供的自动工具。你可以借此一直向正确的设备发送合适的图片。

误区3:移动版并不意味着“精简版”

针对移动内容,响应式设计师当前有两种选择。他们可以选择载入原来所有的桌面版内容,或者针对小型移动屏幕载入特定内容。过去我们曾认为通过较小的屏幕访问网页意味着用户希望获得“精简版”体验。事实并非如此。据谷歌调查显示,92%网络用户会切换设备以完成某个任务。这意味着某些通过智能手机访问网站的用户,与通过桌面电脑访问网站的用户一样,希望能够执行相同的操作(游戏邦注:例如购买网站上的产品)。

真正高端的网站则需要超越响应式布局这一范畴,将内容而不只是情境也考虑入列。这意味着开发者需要更为深思熟虑地创造额外内容、结构和元数据,使其顺利运行于所有屏幕尺寸。

误区4:耗尽资源

将原有的网站设计强塞入可运行于任何浏览器的响应式框架中,并令其在更老旧的浏览器中相应降低水准,这真是一项繁琐而费钱的工作。为何不试试重建一个网站,这要比捣鼓原来的设计要实惠和容易得多。

另一个选择就是使用自动适配的模板而非单一的响应式设计。自动适配的模板允许你针对不同设备的屏幕尺寸和分辨率,将设计分解成多个响应性模板。这个解决方案可让你反复测试和发行,降低响应式设计所需的时间、开发和QA成本。

响应式设计无疑在解决多屏幕开发难题上迈进了一大步。但在今天这个后PC时代(美国电子商务网站已有31%流量来自智能手机和平板电脑),响应式设计仍处于初级发展阶段,需要考虑周全的执行方式才能传递出顶级的用户体验。(本文为游戏邦/gamerboom.com编译,拒绝任何不保留版权的转载,如需转载请联系:游戏邦

Make the mobile web better: Don’t make these 4 responsive-design mistakes

Igor Faletski

This story is part of a series exploring the themes of our upcoming, invitation-only Mobile Summit, April 1-2 in Sausalito, Calif.

Explore more stories in the Mobile Summit Debate series.

Igor Faletski is CEO of Mobify.

Until recently, almost everyone who accessed the web used the same device: a desktop computer. In 2006, just two screen sizes accounted for 77% of all web usage. If designers were building bridges instead of web sites, in 2006 they only had to plan for Ford Model T’s.

As you know, this paradigm has completely shifted. Our research found that today, eight screen sizes—various laptops, smartphones, tablets, monitors, web-enabled TVs, and netbooks—account for 77% of web usage. What’s more, no one screen size has more than 20% of the market share. Today, we must plan for all sorts of vehicles crossing bridges, from the slowest scooter to speedy Ferraris to enormous Mac trucks.

The fix for today’s multi-screen world where smartphone and tablet users expect as rich and graceful a web experience as desktop users is responsive design. Responsive has become the darling of web designers and developers, and is fast becoming the dominant approach to building new websites. With good reason, too. A responsive design workflow is one of the most effective ways to build tailored web experiences for different screen sizes.

But responsive isn’t a magic bullet. It may solve the problem of screen size layout, but there are inherent problems with the responsive approach that many developers gloss over. Here are four common mistakes that could plague your responsive project.

Mistake #1: Your responsive site is over resourced

At Mobify, we analysed responsive websites for 15 top e-commerce vendors. The data revealed that the average homepage uses 87.2 resources, consisting of 1.9 MB of data. The reason those numbers are so high is because together they dictate how web pages must render on a whole range of different devices and screen sizes. What happens when your responsive site needs to load 87 resources before your site renders? It slows down.

It goes without saying, we all hate waiting for websites to load. When smartphone customers are forced to wait an extra second, conversion rates drop by an additional 3.5%. By the three second mark, 57% of users will have left your site.

To improve responsive website performance, make sure only necessary resources are sent to customers’ smartphones, tablets and desktops. You can compress and concatenate JavaScript and CSS resources with tools like SASS for CSS compression and Uglify for JavaScript compression, or with Mobify’s automated JavaScript and CSS acceleration tool.

Mistake #2: Your images are bloated

Images pose a major responsive design problem. Since a responsive website uses a single markup across devices, how do you make sure that only big, beautiful images are served to Retina iPad displays, while old smartphones get smaller low-resolution images that will load quickly?

For image-rich websites, page performance on mobile can tank along with conversion rates. Plus, the wasted bandwidth costs of sending weighty images to the wrong devices is practically throwing money away.

The good news is that several solutions exist for dynamically optimizing your images for all screen sizes and resolutions, including an automated tool we created. This means you can always send the right images to the right devices.

Mistake #3: Mobile doesn’t mean “lite”

When it comes to content, responsive designers currently have two choices. They can choose to load all the existing desktop content, or load specific content for small, mobile screens. We used to think that accessing the web via a small screen meant that users wanted a “lite” experience. Not true. According to Google, 90% of web users move between devices to accomplish a goal. That means someone accessing your website from a smartphone likely wants to perform the same actions—like buying your product—as someone from the desktop.

Truly sophisticated websites will need to move past responsive layout and take content—not just context—into account. That could mean more thoughtfully creating additional content, structure and metadata that works across all screens.

Mistake #4: You broke the bank

Shoehorning an existing website design into a responsive framework that works on every browser and will degrade gracefully in older, legacy browsers is complicated and expensive. Try rebuilding a site from the ground up instead of manipulating existing design—it’s generally cheaper and easier.

Another option is to use adaptive templates rather than a single responsive design. Adaptive templating lets you break up the design into multiple responsive templates that are targeted to different device screen sizes and resolutions. This solution lets you test and launch iteratively, bringing down the time, development and quality assurance costs of going responsive.

Responsive design is indeed a big step forward in solving the multi-screen conundrum. But it’s still a nascent approach and requires thoughtful implementation to deliver top-notch customer experiences in today’s post-PC world where 31% of all traffic to US e-commerce sites already comes from smartphones and tablets.(source:venturebeat


上一篇:

下一篇: