The Evolution of Mobile Website Development and Why It’s Encouraging

My mobile browsing life began waiting minutes for sports news sites to load on my navy blue Kyocera Slider. From there It evolved to playing BrickBreaker on a white Blackberry pearl, which was a substantial upgrade at the time. Eventually landing myself what was a top of the line phone for 2009, the Palm Pree. I still miss this phone to be honest, not the performance (512 mb Ram, 600 MHz single core CPU and 8gb of flash storage) by any means but I do miss the feel of the phone in my hand, it was sleek, rounded and sexy. As the hardware for mobile devices developed, around 2007 with the launch of the first generation Iphone the mobile web finally managed to take a solid hold on usability and the web.

Separate Mobile Sites (1996–2008)

It began with idea of mobile specific versions of websites. They would usually live on a m.yourdomain.com or at mobile.yourdomain.com. A simple javascript detection on the homepage determines if the visitor was using a mobile device or a computer and redirects them if appropriate. These pages were essentially simplified versions of the main websites, except designed to be viewed on the hardware limited mobile devices available at the time. Could you imagine viewing the current ESPN or Vogue websites on your old Motorola Razr phone? It simply wouldn’t be possible.

The Golden Age of Responsive Web Development (2009 — Present)

In 2001 the marketing titan Razorfish created a webpage for the Car manufacturer Audi where the layout of the webpage would adapt and resize to the width of the browser. This was the first widely known usage of what would become known as “responsive design”. However, limited by browser compatibility it wasn’t until 2009 when the CSS3 media query module was released did this idea gain momentum. In 2012 the Media Query become a W3C recommended browser standard feature thrusting fluid layouts into the mainstream. These media queries empowered developers and designers to bridge the gap between mobile dedicated websites and their desktop counterparts. Unfortunately a few common issues with following the responsive design pattern have evolved. Those being slower than ideal load times on mobile devices usually caused by image sizes (desktop images shrunk to display on mobile), render blocking javascript, and DOM style recalculations as CSS is loaded. Luckily, the intense developer design to improve their platforms, AMP was born.

Speed Baby Speed, AMP Has Arrived (2016 — Future)

Lucky for us, AMP (Accelerated Mobile Pages) was introduced in partnership with Google and Twitter as the AMP Project in October 2015, but not released to the public until February 2016. The AMP Project’s goal is to solve the costly slow loading aspects of mobile responsive web pages. Unlike the separate mobile sites of the early 2000’s, AMP tends to be used for blogs and news articles. Enabling almost instant load times for the sites using this technology. AMP has many restrictions on how to structure code with specific requirements for it to be a “true” Accelerated Mobile Page. You can read about them here. The basic principle of AMP is to decouple the layout from any resources that need to be downloaded such as images, fonts or other external resources.

Why it’s Encouraging

I’ve briefly overviewed how the mobile web has evolved from basic copies of real websites, to fluid responsive masterpieces, lastly specially developed impressively fast mobile platforms. What’s encouraging to me is two factored. It’s encouraging to see the massive technology companies Twitter and Google working together. Generally large technology companies like these release their technology as open source initiatives through Github or keeping them as in-house proprietary technologies. I’m also encouraged to see developers take elements and ideas from the past, creating separate mobile pages, but applying modern technologies and patterns to improve them. From clunky mobile sites to streamlined high performance mobile specific pages.

I can’t wait to contribute to and see what else the developer community comes up with.


Originally published at www.theredrooffs.com.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.