Skip navigation
Help

Web browsers

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.
Original author: 
Jon Brodkin


Can Google's QUIC be faster than Mega Man's nemesis, Quick Man?

Josh Miller

Google, as is its wont, is always trying to make the World Wide Web go faster. To that end, Google in 2009 unveiled SPDY, a networking protocol that reduces latency and is now being built into HTTP 2.0. SPDY is now supported by Chrome, Firefox, Opera, and the upcoming Internet Explorer 11.

But SPDY isn't enough. Yesterday, Google released a boatload of information about its next protocol, one that could reshape how the Web routes traffic. QUIC—standing for Quick UDP Internet Connections—was created to reduce the number of round trips data makes as it traverses the Internet in order to load stuff into your browser.

Although it is still in its early stages, Google is going to start testing the protocol on a "small percentage" of Chrome users who use the development or canary versions of the browser—the experimental versions that often contain features not stable enough for everyone. QUIC has been built into these test versions of Chrome and into Google's servers. The client and server implementations are open source, just as Chromium is.

Read 11 remaining paragraphs | Comments

0
Your rating: None

FF and Chrome WebRTC chat

Today, Google and Mozilla both demonstrated their commitment to WebRTC — an open-source project to create in-browser voice and video chat without additional software — by making the first video call between Chrome and Firefox using the standard. WebRTC was built using Javascript and HTML, and aims to provide high-definition video chat with minimal delay without relying on additional apps or potentially vulnerable plugins. So far, the WebRTC standard has had little support — though Mozilla first demonstrated it last year — and cross-browser chat isn't yet available beyond the beta version of Chrome 25 and Firefox Nightly. There's no word on when, if ever, the standard will be adopted across all browsers, but if you're interested...

Continue reading…

0
Your rating: None

A handful of the many screens your site needs to handle. Photo: Ariel Zambelich/Wired.com

Responsive design means making your website readable no matter what screen it might be on. In the words of karate master Bruce Lee, “Don’t get set into one form, adapt it and build your own, and let it grow, be like water.” Lee may have been talking about your mind, but his words apply just as well to your website. To paraphrase the rest of that quote, you put water into a cup, it becomes the cup; so, you put your content on a tablet, it becomes the tablet; you put it on a TV, it becomes the TV.”

On a more practical level, achieving a Bruce Lee-like command of the fluid web means ditching the pixels and points for flexible units like ems or percentages. There’s a lot more to responsive design than just fluid layouts, but it’s definitely a key part of the process.

Curiously, when it comes time to use the other universal element of responsive design — the @media query that applies the actual responsive design — most of us revert right back to pixels with something like @media all and (min-width: 500px) {}. It seems logical; after all, you’re trying to fit your content into a window with specific dimensions, so why not use pixels?

Certainly you can, and most sites we’ve seen up to this point use pixels for the actual media query breakpoints, but it’s worth noting that you can use ems here as well.

Lyza Gardner over at Cloud Four recently posted a look at why Cloud Four’s new responsive design uses ems in its media queries. Here’s her reasoning for Cloud Four’s em-based approach:

Folks who design for traditional reading media — where the content really is king — don’t center design decisions around the absolute width of content-holding elements so much as around the optimal line lengths for the content they’re flowing. There are some tried-and-true numbers one can shoot for that make for the “right” number of letters (and thus words) per line for comfortable human reading.

Thus actual column width is a function of font size and ems-per-line.

The rest of the post walks through how Cloud Four used em-based media queries to create a better navigation experience on their site. Some of the advantages may not apply to every responsive design, but there is one additional benefit that works nearly everywhere — em-based media queries mean that your site will handle user zooming much better, applying media queries instead of allowing content to overflow its container.

But perhaps the best part of an em-based approach is that it seems to work in nearly every web browser. Cloud Four’s post doesn’t get into the specifics of their browser testing so I fired up a couple of virtual machines and tested their site and my own simplified demo page in every major browser.

According to my testing, em-based media queries work properly in all OS X browsers. (I tested the latest versions of Safari, Firefox, Chrome and Opera.) Only Firefox and Opera apply media queries on zoom, though. (Chrome and Safari need a page refresh before the query is applied.)

On Windows 7 Firefox, Opera and Chrome behave the same way they do on OS X. IE 9 also worked fine and, like Firefox and Opera, applies media queries when zooming without needing a page refresh. Judging by the comments on the Cloud Four blog, Chrome on Linux may have some issues, but in my testing Firefox and Chrome on Fedora worked as expected.

All the mobile browsers I tested on Android worked as well (Firefox, Chrome, Opera Mini and the default Android browser). On iOS Mobile Safari applies em-based queries as you would expect.

In the end you certainly don’t need to use em-based media queries. As many sites out there demonstrate, pixel-based queries work. At least for now. However, as a wider range of screen sizes begin to access the web switching to em-based queries may put you ahead of the game. Em-based queries mean addressing the content-width rather than just the screen width and that feels like a more future-friendly approach.

0
Your rating: None



Mozilla has teamed up with Web design studio Little Workshop to develop a Web-based multiplayer adventure game called BrowserQuest. The game is built with standards-based Web technologies and is designed to be played within a Web browser.

With the technical capabilities offered by the latest standards, Web developers no longer have to rely on plugins to create interactive multimedia experiences and application-like user interfaces. As we reported earlier this month, modern standards are making the Web an increasingly viable platform for game development.

BrowserQuest, which is built with JavaScript and HTML5, is a compelling demonstration of how existing standards can be used to create browser games. It uses the HTML5 Canvas element to render a tile-based 2D world, HTML5 audio APIs to support sound effects, WebSockets to facilitate communication with the backend server, and localStorage to save the player's progress.

The game's remote backend, which enables the real-time multiplayer gameplay, was coded in JavaScript and runs on top of Node.js. The load is balanced across multiple Node.js instances on three separate severs. At the time this story was written, the backend was successfully handling over 1,900 simultaneous players. The status of the BrowserQuest backend can be monitored through the game's real-time dashboard interface.

The developers focused on using widely-supported standards so that the game would work well across a wide range of desktop and mobile browsers. It works just as well on a tablet device, for example, as it does on a desktop computer.

The future looks even brighter, as there are a number of pending Web standards that will greatly enhance support for building games on the Web in the future. Features like 3D graphics and support for game controller peripherals, for example, could eventually take the browser beyond the realm of casual gaming. You can refer to Mozilla's wiki to see an overview of the work that the organization is doing to improve browser-based gaming. For more details about BrowserQuest, see the Mozilla Hacks blog or check out the backend server code on GitHub.

Read the comments on this post

0
Your rating: None



Fragmentation remains an issue for third-party Android application developers. The wide spread and slow rate of adoption for new versions of the operating system prevent developers from being able to use the latest APIs. But native application developers aren't the only ones who are feeling the pain. A prominent Web developer has recently drawn attention to the challenges that Android version fragmentation poses for mobile Web development.

As we explained in some of our recent Android browser coverage, the platform's default Web browser has historically not been very good at handling the most intensive application-like Web experiences. It lacks support for many modern Web standards and has difficulty handling things like animated transitions. Google is finally correcting the problem by bringing a full port of its excellent Chrome Web browser to the Android platform.

Read the rest of this article...

Read the comments on this post

0
Your rating: None

Adobe Shadow makes it easy to test your site on multiple devices at the same time. Photo: Adobe

Adobe Labs has released Adobe Shadow, a new project that offers a simple way to test your websites on multiple devices at the same time.

To try out Adobe Shadow, head on over to Adobe Labs and grab the desktop app and Chrome browser plugin, along with the Android and iOS offerings.

If you’ve never tried testing your site simultaneously on multiple devices, the fact that Shadow consist of four separate apps should give you some idea of how difficult it generally is. Thankfully, once you have all the pieces installed, Shadow makes the rest of the testing process as simple as hitting refresh. In fact, much of the time you don’t even need to do that — Shadow will automatically mirror whatever you’re doing on the desktop to the rest of your connected devices.

Though it’s still a beta release, Shadow may well be the most useful thing Adobe has ever built for web developers, particularly those that have embraced responsive design. It’s no secret that, while responsive design allows developers to easily target a wide range of screen sizes, it adds a considerable amount of work to the development process. But with Shadow mirroring your website across dozens of devices at the same time, testing becomes simple and easy. It’s a bit like synchronized swimming for web browsers. You can even debug and make changes directly in Chrome and then see the results on each device. To get an idea of how Shadow works, check out this overview video from Adobe:

There are two small problems with Shadow. The primary problem is that Shadow will only test your site in WebKit mobile browsers. We’d hate to see Shadow become yet another reason for developers to ignore non-WebKit browsers. So, while Shadow is great, it won’t give you the whole picture right now.

The good news is that Shadow is a beta release and a work in progress. I spoke with Bruce Bowman, Senior Product Manager of Shadow and, while he stopped short of committing to anything, Bowman made it clear that Adobe plans to keep expanding Shadow’s capabilities as the project progresses.

The other problem with Shadow isn’t actually a problem with Shadow directly, but its usefulness is nevertheless directly related to the number of iOS and Android devices you have on hand. Obviously those that will benefit most from Shadow are large web development shops with the budget to invest in dozens of mobile devices. Shadow is no less handy for individual developers with only one or two devices, though the results are of course limited.

Should Shadow prove popular, perhaps it will help spur the sort of device swap gatherings we’ve heard mobile expert Peter Paul Koch suggest — a group of web developers pool their resources, bring together a wide range of mobile devices and take turns testing websites. Shadow could make that process considerably easier and faster thanks to its live editing capabilities.

0
Your rating: None

Any -webkit- feature that doesn’t exist in a specification (not even an Editor’s draft) is not CSS3. Yes, they are commonly evangelized as such, but they are not part of CSS at all. This distinction is not nitpicking. It’s important because it encourages certain vendors to circumvent the standards process, implement whatever they come up with in WebKit, then evangelize it to developers as the best thing since sliced bread. In our eagerness to use the new bling, we often forget how many people fought in the past decade to enable us to write code without forks and hacks and expect it to work interoperably. Lea Verou explains why single-vendor solutions are not the same as standards and not healthy for your professional practice or the future of the web.

0
Your rating: None

With a mobile-first responsive design approach, if any part of the process breaks down, your user can still receive a representative image and avoid an unnecessarily large request on a device that may have limited bandwidth. But with several newer browsers implementing an “image prefetching” feature that allows images to be fetched before parsing the document’s body, some of the web's brightest developers are abandoning responsive images in favor of user agent detection, at least as a temporary solution. For us standardistas, UA detection leaves a bad taste in the mouth. More importantly, as the number and kinds of devices continue to grow, UA detection will quickly become untenable—just as browser detection did back in the bad old days before web standards. What's really needed, argues Mat Marquis, is a new markup element that works the way the HTML5 video element works. Sound crazy? So crazy it just might work.

0
Your rating: None