Hoppa till huvudinnehåll
Menu

Den här sidan använder cookies. Om du fortsätter använda sidan så accepterar du användandet av cookies. Läs mer om cookies

Jag förstår

Mobile-first is dead

Is mobile-first dead? If you’re thinking of responsive design and cross-device design, your implementation techniques are probably wrong.

Jorge Hellsten 2017-10-04

Prerequisite

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:

"Google's mission is to organize the world's information and make it universally accessible and useful."

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.

Mobile expierence

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.

Technology

The AMP technology relies on open web formats so it can be displayed in modern web browsers without any extensions. But how does it differ from regular html? Well, it’s forbidden to use Javascript, well, in a way, it’s forbidden to load or embed any Javascript that isn’t coming from the AMP itself, meaning no external scripts or vanilla Javascript can be used. AMP comes loaded with hundreds of work level components which enables interactivity such as:

<amp-carousel>
<amp-sidebar>

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).

Technically the comparison is quite similar while Facebook has lower threshold to get started with without any new knowledge. Facebook can already use what you have developed and optimize it with very little effort. And AMP lacking some core HTML functionality such as the use of Javascript. They both have their benefits and drawbacks. Facebook as a business partner and gets its standard 30% cut if publishers sells the ads. AMP is a open source project who is not trying to keep you inside any particular app.

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.

Summary

And if you ask me “Is the mobile first dead?” I would answer as Trevor Paulsen wrote in this article:

"There’s no one-size-fits-all, and every channel has its drawbacks as well as its opportunities."

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.

 

Abbreviations:
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

Links:
Average Web Page
Emarketing
Google/About
PageRank
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/

Vi hjälper dig nå resultat. Kontakta oss Ring direkt på 08-20 90 04.