Coyier of CSS Tricks gave a talk at the recent
[Editor’s note: The following is a guest post from Igor Faletski, CEO of Mobify, which provides tools for adapting web sites for smartphones and tablets.]
You’ve probably heard people say we’re living in a “post-PC world.” What does that mean for web developers? It means that 30% to 50% of your website’s traffic now comes from mobile devices. It means that soon, desktop and laptop users will be in a minority on the web.
How do we deal with this tectonic shift in user behavior? We’ve moved beyond the era of m-dot or t-dot hacks, into one where responsive and adaptive design techniques rule the day — what the W3C calls a One Web approach. The key part of the W3C’s recommendation is that “One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using.”
For developers that means that taking a One Web approach ensures that not only does your site work on the smartphones and tablets of today, but it can be future-proofed for the unimagined screens of tomorrow.
There are currently three popular approaches to developing a One Web site: using a responsive design; client-side adaptive designs; and server-side adaptive designs.
One is not better or worse than the other; each has its own strengths and weaknesses and the wise web developer will consider the benefits and drawbacks of each before picking the one that works for their next project.
Responsive web design is the most common One Web approach. The approach uses CSS media queries to modify the presentation of a website based on the size of the device display. The number of responsive sites is rapidly increasing, from the Boston Globe to Disney to Indochino.
A key advantage of this approach is that designers can use a single template for all devices, and just use CSS to determine how content is rendered on different screen sizes. Plus, those designers can still work in HTML and CSS, technologies they’re already familiar with. Additionally, there’s a growing number of responsive-friendly, open-source toolkits like Bootstrap or Foundation which help simplify the process of building responsive sites.
On the other hand, there are few shortcuts to a sound responsive design. To go responsive, organizations often have to undertake a complete site rebuild.
The design and testing phase can be quite fussy, as it can be difficult to customize the user experience for every possible device or context. We’ve all seen responsive site layouts that look like a bunch of puzzle pieces that don’t quite fit together. Responsive web design works best in combination with a mobile-first approach, where the mobile use case is prioritized during development. Progressive enhancement is then used to address tablet and desktop use cases.
Performance can also be a bugbear for responsive sites. At Mobify, we recently completed an analysis of 15 popular responsive e-commerce sites. Among these sites, the home pages loaded an average of 87 resources and 1.9 MB of data. Some responsive pages were as big as 15MB.
The numbers are that high because a responsive approach covers all devices. Your user is only using one device, but they have to wait for all of the page elements and resources to load before they can use it. Put simply, performance affects your bottom line. On smartphones, the conversion rate drops by an extra 3.5 percent when users have to wait just one second. By the three second mark, 57 percent of users will have left your site completely.
While responsive design is fast becoming the de facto standard, it also creates new challenges for online businesses, including how to handle images, how to optimize mobile performance and often means sites need to be rebuilt from the ground up with a mobile first approach.
A client-side adaptive approach means you don’t have to rebuild your site from the ground up. Instead you can build on existing content while still delivering a mobile-responsive layout. For expert developers, this approach also enables you to specifically target particular devices or screen resolutions. For example, for many of Mobify’s online fashion retail clients, 95% of their mobile traffic comes from iPhones. Client-side adaptive means they can optimize specifically for Apple smartphones.
Unlike responsive design, adaptive templates ensure that only the required resources are loaded by the client’s device. Because device and feature detection is shifted to the mobile device itself, CDN networks like Akamai and Edgecast can use most of their caching functionality without disrupting the user experience.
We can achieve the server-side adaptive approach in a variety of ways, through server-side plugins and custom user agent detection. Sites that use server-side adaptive include Etsy, One Kings Lane and OnlineShoes.com.
Why choose server-side adaptive? It typically offers distinct templates for each devices, enabling more customization, and it keeps device-detection logic on the server, enabling smaller mobile pages that load faster. Additionally, there are numerous server-side plugins available for common CMSs and eCommerce systems such as Magento.
This approach isn’t for the faint of heart–it typically requires significant changes to your back-end systems, which can result in a lengthy (and costly) implementation. The requirement to manage multiple templates raises ongoing maintenance costs. Finally, this approach can encounter performance issues when servers are under heavy load. When mobile user agent detection is performed on the server, a lot of common caching mechanisms deployed by CDNs like Akamai need to be turned off. This can result in a slower user experience for mobile and desktop visitors.
Of course, many companies are still wrestling with the basics of responsive, and they’re not ready to confront the more sophisticated flavors of adaptive. Increasingly, competition and mobile traffic, however, will drive more and more organizations to kick the tires on all three approaches, and pick the one that works best for their users.
Microsoft’s Internet Explorer 10 saw a meteoric rise in market share last month, jumping from 2.93 percent in March to 6.22 percent in April, according to NetMarketShare.
Some of IE 10′s growth might be attributable to more Windows 8 machines coming online, but it also comes close on the heels of the release of Internet Explorer 10 for Windows 7.
As we noted in our review, IE 10 is a huge step forward for Microsoft’s oft-maligned browser, bringing much better web standards support and considerable speed improvements over IE 9. And there’s plenty to like even on Windows 7 where Microsoft claims users should see a 20 percent increase in performance over IE 9, as well as better battery life on Windows 7 laptops.
While web developers should be happy to see IE 10 gaining some ground given its vastly superior web standards support and speed compared to previous releases, looking at the bigger browser share picture is still disheartening. While IE 10 use may have doubled last month, it still trails IE 6 use worldwide.
The most widely used version of IE on the web remains IE 8, which, while much better than IE 6, still has next to no support for modern web development tools like HTML5 and CSS 3.
It’s still going to be some time before WebRTC technology starts to deliver cool apps, but even today developers are quickly moving from the realm of cool WebRTC experiments, like the Mozilla/Google phone call demo, to useful apps like Codassium.
WebRTC is a proposed standard — currently being refined by the W3C — with the goal of providing a web-based set of tools that any device can use to share audio, video and data in real time. It’s still in the early stages, but WebRTC has the potential to supplant Skype, Flash and many native apps with web-based alternatives that work on any device.
Codassium uses WebRTC to bring together WebRTC-based video chat and Mozilla’s Ace code editor. The result is what Wreally Studios, creators of Codassium, call “a better way to conduct remote interviews.” Of course Codassium could be used for more than just interviews — think code reviews, remote pair programming or even just discussing code with remote employees.
To use Codassium you’ll need to be using a web browser that supports WebRTC — recent versions of Firefox and Chrome will both work. Head on over to Codassium, click the Start button and allow the site to access your camera and microphone. Once the video chat and Ace editor load, just click the Invite button and send the resulting link to the person you’d like to work with.
The Internet Archive’s Wayback Machine is deceptively simple — plug in a website and you can see copies of it over time.
What you don’t see is the massive amount of effort, data and storage necessary to capture and maintain those archives. Filmmaker Jonathan Minard’s documentary Internet Archive takes a behind the scenes look at how (and why) the Internet Archive’s efforts are preserving the web as we know it.
The interview with Brewster Kahle, founder of the Internet Archive, especially offers a look at not just the idea behind the archive, but the actual servers that hold the 10 petabytes of archived websites, books, movies, music, and television broadcasts that the Internet Archive currently stores.