Comments
yourfanat wrote: I am using another tool for Oracle developers - dbForge Studio for Oracle. This IDE has lots of usefull features, among them: oracle designer, code competion and formatter, query builder, debugger, profiler, erxport/import, reports and many others. The latest version supports Oracle 12C. More information here.
Cloud Computing
Conference & Expo
November 2-4, 2009 NYC
Register Today and SAVE !..

2008 West
DIAMOND SPONSOR:
Data Direct
SOA, WOA and Cloud Computing: The New Frontier for Data Services
PLATINUM SPONSORS:
Red Hat
The Opening of Virtualization
GOLD SPONSORS:
Appsense
User Environment Management – The Third Layer of the Desktop
Cordys
Cloud Computing for Business Agility
EMC
CMIS: A Multi-Vendor Proposal for a Service-Based Content Management Interoperability Standard
Freedom OSS
Practical SOA” Max Yankelevich
Intel
Architecting an Enterprise Service Router (ESR) – A Cost-Effective Way to Scale SOA Across the Enterprise
Sensedia
Return on Assests: Bringing Visibility to your SOA Strategy
Symantec
Managing Hybrid Endpoint Environments
VMWare
Game-Changing Technology for Enterprise Clouds and Applications
Click For 2008 West
Event Webcasts

2008 West
PLATINUM SPONSORS:
Appcelerator
Get ‘Rich’ Quick: Rapid Prototyping for RIA with ZERO Server Code
Keynote Systems
Designing for and Managing Performance in the New Frontier of Rich Internet Applications
GOLD SPONSORS:
ICEsoft
How Can AJAX Improve Homeland Security?
Isomorphic
Beyond Widgets: What a RIA Platform Should Offer
Oracle
REAs: Rich Enterprise Applications
Click For 2008 Event Webcasts
In many cases, the end of the year gives you time to step back and take stock of the last 12 months. This is when many of us take a hard look at what worked and what did not, complete performance reviews, and formulate plans for the coming year. For me, it is all of those things plus a time when I u...
SYS-CON.TV
Engaging the Mobile Visitor
Combining responsive design with performance optimization to deliver exceptional user experiences

In today's hyper-connected world, Web and mobile application performance is playing a more critical role than ever in driving user adoption and engagement. End-users have high expectations - they expect pages to load faster than ever before and they expect richer and more engaging Web experiences and applications.

At the same time, mobile is a fast-growing, global phenomenon that is changing the way we all interact with content, whether for business, information or entertainment. As such, the ability to engage mobile users with fast, quality Web experiences has become a business requirement and a prerequisite for success. Ignore the needs of mobile users, and risk losing a large and growing portion of the business.

Responsive Web Design Adoption Is Growing Fast
Yet, delivering fast, quality experiences in this brave new world isn't exactly easy due to the challenges in optimizing performance across different browsers, screen sizes, networks and devices. Therefore, businesses are looking for techniques that will work equally well on every device. This process is referred to as Responsive Web Design (RWD).

Responsive Web Design[1] is a Web development approach that suggests Web pages should respond to the context in which they're loaded (primarily screen size) and change their user interface accordingly. This technique consists of a mix of flexible grids and layouts, images and an intelligent use of CSS3 media queries. RWD pages contain the HTML required to display all versions of a Web site, including both mobile and desktop views. CSS and JavaScript run in the browser and hide or modify the content to fit the screen size.

The trend of using RWD is growing and growing fast. One of the reasons is that RWD effectively eliminates the need to re-enter the design and development phase each time a new mobile device category comes to market.

As stated, undertaking a RWD strategy sounds like the ideal solution. However, it shouldn't be thought of as a silver bullet for improving the mobile user experience. The reality of successfully engaging mobile users with RWD sites is not always easy. As mobile devices have grown more powerful and networks have become faster and more consistent, the expectations of mobile end-users have also grown.

Delivering Fast and Quality Web Experiences Is Not Easy
If RWD isn't a panacea, what are some of the challenges associated with delivering this type of web site? According to recent research[2] on the composition of RWD sites and the impact on Web performance, 347 RWD[3] sites were tested across different screen resolutions and compared the number of bytes required to download each page across each resolution. The results revealed that 72 percent of RWD sites tested were roughly the same size across different screen resolutions and 22 percent were only slightly smaller.

As important, not only do most pages deliver the same payload across different devices, but also that same payload aligns to the general trend of pages becoming heavier[4] with the average page size close to 1.2 megabytes.

One of the challenges associated with larger, more complex RWD-developed pages is that they need to be delivered to end-users' browsers, which then need to process and render them. On underpowered mobile devices with limited computing power and on constrained wireless and cellular networks this can adversely affect the user experience.

What does delivering large, complex pages on mobile devices mean from an end-user's perspective? Here's a snapshot of the experience of an end-user visiting a US retailer's RWD site's home page on a variety of different best of breed devices/networks. Performance metrics were captured with an empty browser cache using Safari's remote debugging capability. Ten tests for each device/network were run with the median page load time (onLoad event) displayed below. The conclusion is obvious. The delivery of a relatively small 700KB site to a mobile device, over wireless networks, has resulted in serious performance shortcomings.

Figure 1: Example RWD site does not meet end-users' performance expectations

Fundamentally, end users don't care about the underlying technological challenges required to deliver fast, quality experiences to constrained devices over wireless and cellular networks. They just want sites to load fast and work as expected. And end-user expectations just keep getting higher and higher, corresponding to a desire for Web applications that keep getting faster, richer and more engaging.

Steps for Delivering Fast, Quality Responsive Web Design Sites
How do you deliver fast, quality RWD sites? As explained earlier, RWD pages contain the HTML required to display all versions of a website, including both mobile and desktop views. CSS and JavaScript run in the browser and hide or modify the content to fit the screen size. On smartphones, this often means the browser downloads the entire content needed to display the desktop site, only to have CSS/JS hide the vast majority of it.

The first step is to focus on the actual page and the associated objects delivered to the end user. There are also a variety of options available to developers looking to overcome the challenges associated with delivering heavy RWD sites. To start with, move content as close to the end user as possible (i.e., use a Content Delivery Network [CDN]) and leverage optimal delivery mechanisms such as SPDY, an open networking protocol for transporting Web content, that are particularly relevant for wireless networks.

Next focus on the components of the Responsive Web Design application, the HTML, images, JavaScript and CSS objects. To deliver faster pages, focus on:

  • Reducing the number of requests
  • Reducing the number of bytes
  • Accelerating rendering

Let's explore these factors in more details.

Reducing the Number of Requests
The fastest request is the one that isn't made. Each client HTTP request and server response combination represents at least one round-trip on the network. Depending on the end-user's situation and proximity to the origin server, a single round-trip request can take seconds to complete. A single Web page can require dozens of HTTP requests before it can render content, with requests often delaying one another due to the number of connections limited by the specific browser. To reduce round-trips use several techniques to eliminate unnecessary requests such as consolidating multiple CSS and JavaScript files, in-lining small images and leveraging new caching features in HTML5.

Figure 2: A simple optimization to reduce requests is to consolidate multiple CSS or JavaScript files into one

Reducing the Number of Bytes
The math is simple: the larger a web page (measured by bytes), the longer it will take to deliver over a constrained network, and the longer it will take a browser to process and render the content. Images in particular are an issue for RWD sites. Keep file size in check by adjusting image formats, improving cache management, compressing files, and removing data such as comments, whitespaces and image metadata. Automated solutions exist to help deliver the right image resolution to the right device and avoid excessively large images, maintaining image quality at the edge of what the user can perceive, for both small and large screens. For example, a page can be optimized to only load the images that are visible within the current viewport. As the user scrolls down, new images are loaded on demand. Loading images on demand helps improve page load time and also reduces bandwidth for cases where a user doesn't actually scroll down a page. For RWD sites in particular this keeps pages from downloading hidden images, meant for other display sizes or conditions.

Accelerating Rendering
Processing a web page is a complicated process. Browsers employ complex logic during load time, making decisions such as which files to download serially vs. in parallel, which resource types block rendering, and how to manage their connections. At the same time, they need to parse and execute complicated HTML, CSS and JavaScript code, which is often not well defined. Unfortunately, the browser doesn't know sites in advance and is forced to employ generic logic when processing a page. This logic changes between old and new browsers, is limited by backward compatibility and is not customized to a site. Techniques like deferring print style sheets, keeping social buttons from blocking rendering and prefetching the next page are ways to guide the browser into doing the right thing. As a result, users can get a truly fast user experience, attuned to their needs.

Figure 3: The optimized RWD site is significantly faster due to a reduction in bytes, requests and faster rendering

Conclusion
Delivering fast RWD sites is not necessarily easy and requires considerable expertise and resources. Few organizations have developers or expertise in-house to take this on. As RWD evolves new models for delivering fast, quality Web experiences to all users are coming to light. In particular an approach called RESS (Responsive Web Design + Server Side Components)[5] seems to combine the best of current mobile delivery techniques while keeping performance in the forefront. In addition, as mentioned earlier, there are a variety of options available to help developers looking to overcome the challenges associated with delivering heavy RWD sites, such as moving content to a Content Delivery Network (CDN), that has technologies to help accelerate Web performance or leverage optimal delivery mechanisms such as SPDY. The techniques we highlighted here are also helpful, and when followed, can dramatically improve your ability to deliver fast, quality Web experiences while engaging your mobile users.

References

  1. http://alistapart.com/article/responsive-web-design
  2. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
  3. http://mediaqueri.es/
  4. http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/
  5. http://www.lukew.com/ff/entry.asp?1392
About Lorenz Jakober
Lorenz Jakober is a senior product marketing manager at Akamai Technologies and has extensive experience in the areas of web and mobile application design, performance optimization, usability, and delivery. Prior to joining Akamai Technologies he drove mobile product marketing strategy and the complexity at the edge theme for Compuware Gomez. He is an avid spokesperson and blogger on the topic of mobile and web performance

In order to post a comment you need to be registered and logged in.

Register | Sign-in

Reader Feedback: Page 1 of 1

There is good advice here for developers and designers for RWD. Most developers focus on design, aesthetics, rendering flow and panning, but loading performance on mobile and tablet devices is also extremely important and should not be underestimated. Most mobile and tablet devices have lower processing capacity then desktops and use weaker networks especially when they operate from the cellular networks.

Apart from looking at only component shapes and rendering behavior, it is important to check the loading sequence and mechanism.

http://www.elegantmicroweb.com/capability/tc/responsive-web-design.htm

Responsive Web Design


SOA World Latest Stories
Enterprises are moving to the cloud faster than most of us in security expected. CIOs are going from 0 to 100 in cloud adoption and leaving security teams in the dust. Once cloud is part of an enterprise stack, it’s unclear who has responsibility for the protection of applications, ser...
21st International Cloud Expo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced b...
Many organizations adopt DevOps to reduce cycle times and deliver software faster; some take on DevOps to drive higher quality and better end-user experience; others look to DevOps for a clearer line-of-sight to customers to drive better business impacts. In truth, these three foundati...
The last two years has seen discussions about cloud computing evolve from the public / private / hybrid split to the reality that most enterprises will be creating a complex, multi-cloud strategy. Companies are wary of committing all of their resources to a single cloud, and instead ar...
Agile has finally jumped the technology shark, expanding outside the software world. Enterprises are now increasingly adopting Agile practices across their organizations in order to successfully navigate the disruptive waters that threaten to drown them. In our quest for establishing c...
You know you need the cloud, but you’re hesitant to simply dump everything at Amazon since you know that not all workloads are suitable for cloud. You know that you want the kind of ease of use and scalability that you get with public cloud, but your applications are architected in a w...
Subscribe to the World's Most Powerful Newsletters
Subscribe to Our Rss Feeds & Get Your SYS-CON News Live!
Click to Add our RSS Feeds to the Service of Your Choice:
Google Reader or Homepage Add to My Yahoo! Subscribe with Bloglines Subscribe in NewsGator Online
myFeedster Add to My AOL Subscribe in Rojo Add 'Hugg' to Newsburst from CNET News.com Kinja Digest View Additional SYS-CON Feeds
Publish Your Article! Please send it to editorial(at)sys-con.com!

Advertise on this site! Contact advertising(at)sys-con.com! 201 802-3021


SYS-CON Featured Whitepapers
ADS BY GOOGLE