Yambo's Blog
Our Blog » Future of the Web
Future of the Web
What does the future hold for the web? it's a tough question! With the unstoppable rise of mobile applications does the future of the web even involve websites? We hope so!
Online technologies and plugins come and go on the web, watching videos, listening to music, and chatting used to always require additional plugins to run the online application. However, browsers are becoming so much more than just a window to view websites - HTML5 has changed the way the web works - adding dedicated tags for video, music and animations allows for all the interaction of the additional plugins without the additional plugins. And with rolling browser updates with new features being continually added, usually automatically, the days of manually adding plugins are coming to an end.
HTTP - Hyper Text Transfer Protocol - is the system that governs the transfer of web pages from remote servers to your computer. First invented by Tim Berners Lee in the 90's, it's now starting to look a little bit dated. As it comes with a lot of unneccessary baggage slowing down the time it takes a web page to load in your browser. Google are working on variations of HTTP to try and improve speed without the dozen requests your computer makes to the server. Their version called 'SPDY' - pronounced Speedy - accelerates the process by using a technique called multiplexing. Basically multiple signals are compressed into one, and they are assigned a priority number, with the most important requests being loaded first.
Hi-res images on hi-res devices - with the ever-increasing popularity of mobile devices and tablets, and the ever improving resolutions on them, images on the web can look blurry and grainy.
Web images are usually compressed in some way, shape, or form. They are usually compressed due to the amount of time it takes for an image to load. But as web connections are improving, and with better wi-fi capabilities, images load a lot faster than ever before.
So is the excuse of speed no longer as valid as it once was? Well web page speeds are still very important - espeically to Google - and Web Designers need to weigh up the pros and cons of using high resolution imagery on websites. Is it wise to use high resolution imagery on the web? Devices such as the iPad 2 with Retina display show a lot more dots per inch (pixels per inch) than a standard monitor - the higher the dots per inch, the bigger the image will be (and file size). Apple call this HiDPI. This gives the web designer a dilemma. Use a high resolution image on the web, usually 4 times the size of a compressed image, or use a compressed image which could look blurry and grainy on hi-definition devices.
We believe the solution is with 100% responsive web design, and the new 'srcset' attribute. Responsive design allows the designer to target certain devices and style the website accordingly. CSS, for instance, could detect if the device connecting to the website is either using a mobile phone, or a desktop computer, and load the appropriate image for the device. However, Images added to the HTML code, and not via CSS, will not be targeted - this is where the 'srcset' attribute comes into play.
The srcset attribute essentially takes a comma-separated list of URLs each with one or more descriptors giving the maximum viewport dimensions and pixel density allowed to use the image. From the available options, the user agent then picks the most appropriate image for the device. If the viewport dimensions or pixel density changes, the user agent can replace the image data with a new image on the fly.
If you were to open the website on an iPad 2 with retina display, the image loaded will be the high-definition one. However, open the same website on a mobile device and a low-resolution image will be loaded instead.
Further problems could possible arise from this, if you consider a mobile phone with retina display (iPhone 5) - because we then have to reconsider how the device is connected to the web. A high-definition image using a retina display mobile phone connected to the web using 3G isn't of much use. Again, we come full circle back to the speed of the internet connection. Mobile phone users in our opinion want responsive and fast websites on their phones - and probably find the speed of the website more important than high-resolution imagery - especially when the mobile phone is connected to the web without using 3G.
4G, however, is another matter entirely...