In this post, Joe Zeoli, Senior Website and Graphics Developer at Miles Technologies, presents his recent takeaways from the Chrome Developer’s Conference which he attended remotely.
The Chrome Developer’s summit in Mountain View, California wrapped up recently and there is a lot for designers to be excited. There were two high-level topics that the Chrome team focused on this year. The first was performance and the second was making web applications feel more like native applications. If I had to choose one word to describe the summit, it would be “mobile.” Now that the mobile web, in many cases, is starting to really overtake desktop usage we need to adjust how we develop for the web in general.
HTTP (HyperText Transfer Protocol) defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. HTTP/1.1 has done a great job for about 15 years now, but it is time for a change.
In a basic sense, HTTP/1.1 thinks of the web in documents. The user opens a connection with the server and it is served one document at a time. This means that for every asset on your page, the client needs to go back to the server, get the file and do it over again until everything has been downloaded. This becomes a huge performance issue when you start thinking about how many dependencies and assets are on modern web apps.
To get around this, developers use alternative methods like creating sprites (a single image file that contains multiple other images) or concatenating code files (combining everything into a single file). These hacks are a sign that something needs to change with how we interact with the server. HTTP/2, which is currently in the very early stages of implementation, sets out to fix this problem by allowing you to download multiple assets at one time making those hacks irrelevant. It’s also not a ground up rewrite, so all the high level syntax such as methods, status codes, header fields and URIs are still all the same.
Imagine a situation where you are using your phone to check out some details about your flight on the company’s web application, and all of a sudden you lose service. This is something developers didn’t have to think about when just developing for desktops, but it’s becoming apparent we need some sort of offline support.
Service workers set out to make this work and mediate all conversations with the network after the page has already been loaded once. It takes many of the scripts and is able to run them before the page even exists, which opens up a ton of possibilities for making apps function offline. A caveat to this new feature, though, is that the scripts must be on the same origin and the site must have an SSL.
60 Frames Per Second
Google has set this benchmark of making everything tuned to run at 60 frames per second or faster. Presently, the mobile web browsing experience is slow. The slowness being referred to here isn’t about connection, but about the rendering engine specifically. Animations that look great on desktops could end up looking terrible on a mobile browser. Google has made it their mission to tweak their services to support this kind of speed and to optimize the mobile viewing experience of the user. One way Google has started doing this was by Project Ganesh which has made rendering a web page much faster by working directly on the device’s GPU rather than the CPU.
Making web apps ‘appy’
Polymer & Material Design
A new feature of HTML5 is the ability to create your own web components. A web component is a tag that has a specific job to do. For example, if I had to manipulate a few maps in my application, I could create a single, easy to manage tag, and hide the code that makes it work. Google’s Polymer project is based on this idea and sets out to make it easy for developers to grab various components and use them in their application.
Another great feature of Polymer is the ability to easily incorporate Google’s Material Design. Material Design is Google’s answer to how to create importance and depth in mobile design. Its framework has been implemented in many of Google’s mobile apps.
Part of the problem with web applications on a mobile device is the lack of support of the device’s feature. Some really cool new APIs were demoed at the summit to make the integration of web and native apps almost seamless. An example of one of these new API’s is page transitions. On a multi-page website there is that moment of white when going from one page to another. Page transitions would allow the developer to designate elements that persist on different pages as well as animations on the various elements. The resulting experience would make the page load seem more like a single page application as opposed to a completely different page.
Google is also integrating the ability to send push notifications to the phone via a web app, which would let web apps send the device updates and messages. However, Google wanted to make sure the user is always in control of which sites could access these features and when with permissions pop-ups. Google suggests providing context for these notifications before asking a user to decide whether to allow it or not. For instance, instead of asking if the website can access your location on the page load, wait until they have to use it to complete a task. This way the ser understands why her or she is being asked and is more likely to allow the access.
It’s clear that the focus of the Google Chrome team is to give mobile users the best possible experience. Blurring the lines between web and native applications is a big step forward in this endeavor. It opens up endless possibilities in web app development. The important items to remember for the future of the mobile web are to make your applications fast and make them integrate with phones. Keep your users’ best interests in mind at all times, and you’ll have a successful web application that works beautifully on a mobile device.
What are your thoughts on the future of web? Are you an avid user of Google Chrome? Let us know in the comments section below, we always love to hear your feedback.
Does your business website need to become more mobile friendly? Contact us today and talk to an experienced web design advisor.