Digitalist Network // October 04 2017
Mobile-first is dead
In a perfect world you could probably design for all use cases, but optimization is one of the main challenges facing today’s site builders. Studies have shown that if your page hasn’t been fully displayed within 3 seconds, you could lose more than 40% of your website’s visitors. Other case studies shown that if you add 1000 to 2000ms of delay to e-commerce sites, revenues will drop by 4-7%. For big sites that is a lot of money.
Additionally, as web sites becomes more powerful, ambitious and complex, and the size of a website has grown exponentially since 1995 with no sign of slowdown, neither has the growth in the number of internet users. If one looks at how many internet users there were in 1995 vs internet users today, one begin to understand why companies such as Google and Facebook reward site builders with better Search Engine Optimization(SEO) scores if their sites load faster than their competitors. Not to mention that:
What do they mean by “world’s information”? – well all websites or all web information there is. So of course they reward sites with a better pagerank score, if your information is accessible and useful. They see speed and compressed assets as a feature, so they developed a tool called Pagespeed and released it in 2010 (Learn more). Pagespeed module is a very good tool to optimize a site with very little effort if it’s already too late to fix the architecture. It doesn’t just give you compressed files and optimized images, it can give you inline Cascading Style Sheets(CSS) for your above the fold content and lazy load your images.
We use it on many of our Drupal sites in combination with Varnish cache and Memcached. But still this feels like a last resort trying to save a project instead of thinking of e.g SEO first. Or Artificial Intelligence(AI) first – since Google is focusing on AI and Machine Learning(ML) nowadays.
Well, I wanted to talk some about Accelerated Mobile Pages(AMP) and Facebook Instant Articles(FIA). In 2015 Google announced AMP, a open source project with one mission – to improve the performance of the mobile web. With more than 30 publishers contributing to the project, such as Twitter, Pinterest and LinkedIn.
With AI first implementation in mind Google can actually know that your site is gonna be featured with speed, since it difficult for a machine to see the difference of an instant loaded page and a page that is instant but not if it follows a set of rules. So even if your site has a seamless experience and loads under 800ms, the AMP page will get higher rating on mobile search results on search engine applications that uses AMP enabled.
No external CSS is allowed and you can’t import CSS in another CSS file to trick AMP. There’s also a set of disallowed html-tags such as:
<img> <video> <iframe> <!-- but they have their AMP equivalents: --> <amp-img> <amp-video> <amp-iframe> <!-- and all the images must have fixed widths.-->
FIA works a bit differently, it uses HTML5(not all elements are allowed). You need to create them in Facebook’s FIA publisher or you can create templates to load your articles via RSS. Also publishers are required to submit an article for review to be approved by Facebook as publishers in order to be granted access the use of their API and tools. The FIA works only inside the Facebook mobile app but they are shared 30 percent more often than mobile web articles, load 10x faster and are 70 percent less likely to be abandoned(link).
How about Drupal
There are a few modules for both AMP and FIA out there, which I haven’t tried yet. But you could also create different view modes and build new templates for AMP’s or have RSS feeds for your FIA’s.
And if you ask me “Is the mobile first dead?” I would answer as Trevor Paulsen wrote in this article:
So yes, mobile first is dead and we are back into designing for different applications, but this being a bad thing is a misconception, this is an opportunity to get ahead of your competitors and build sites as they were intended.
CSS – Cascading Style Sheets
SEO – Search Engine Optimization
AI – Artificial Intelligence
ML – Machine Learning
AMP – Accelerated Mobile Pages
FIA – Facebook Instant Articles
HTML5 – Hyper Text Markup Language 5
RSS – Rich Site Summary
Average Web Page
Automating Performance Best Practices with PageSpeed – Google I/O 2013 (YouTube)
Authoring Critical Fold CSS
Filter Lazyload Images
Google I/O Keynote (Google I/O ’17)(YouTube)
Accelerated Mobile Pages
“But I already have a fast site!” or: For That Instant Feel (YouTube)
Facebook Instant Articles VS Google AMP
Google AMP One Year Later/