Progressive web apps now being served

Progressive Web Apps

When Google says something is the next big thing, we tend to listen.

And Progressive Web Apps (or PWAs) are, in a word, it.

If you missed this news and were absent the day they had the PWA meeting at work, here’s what you should know.

The nutshell version.

PWAs can be summed up as a web page that can be hot-linked to the homescreen of the user’s phone, creating an app-like experience. Some recent technology enhancements and the increased power of newer smartphones and devices make it possible.

In slightly more technical terms, think of a PWA as a hybrid utility – a mix between a website and a native application on a mobile device.

Thirsty for an example? Here’s an example of a simple PWA that allows users to learn more about beer. Cheers.

Top 10 reasons they’re a good thing

Google (and us for that matter) like PWAs for these reasons.

  1. PWAs are fast to load
  2. They feel like an app
  3. They don’t require an app store to install
  4. They build search engine visibility
  5. They’re responsive
  6. They work with all browsers
  7. PWAs are linkable and not be hard to install
  8. They’re enhanced to work offline or on low-quality networks
  9. They stay fresh because of a background update function
  10. PWAs are safe and served via HTTPS

If you need a laundry list of PWA attributes, look at this detailed look at what Google says are the key elements of a good PWA.

How PWAs keep users engaged.

Studies have shown that in a consumer mobile app, you lose around 20% of the user base for every step a user has to perform before getting to valuable content or experiences.

It’s called the “funnel effect.” And it has huge implications. For example, what if the user has to do any of the following?

  1. Go to the app store
  2. Download the app
  3. Open App
  4. Sign up for the app
  5. Create something
  6. Post/Send to friends
  7. Overcome any other typical experiential roadblock

If each of these steps causes a 20% drop in users, the attrition rate is ridiculous. With PWAs, the first three steps are bypassed, allowing users to find value quicker and stay engaged longer.

Loading & Pushing.

People expect a site to load in 2.0 seconds or less, according to study. After 3.0 seconds, many are gone. Now think of a phone on 3G trying to load the heavy elements of a website. The words “clunky,” “glacial,” and “stultifying” come to mind. PWAs, by contrast, load quickly even in areas with poor connectivity.

Another great PWA feature is the ability to send Push Notifications to users who have added the PWA to their phone. Push notifications can increase CTR by up to 40%.

And now, for PWA drawbacks…

Since Google began leading the push for PWAs in 2015, development has been slow.

Cutting edge browser technologies are needed for a PWA to function correctly. Sure, the PWA most likely will still work on older devices and browsers, but the UX won’t be the same.

Apple is developing the required pieces for PWAs to function 100% correctly on iPhones and other iOS products. And because PWAs function similar to a normal website, a user on an iPhone can still reap the benefits of the PWA, even if they are unable to add it directly to their homepage.

Source links:

[1] https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/
[2] https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
[3] http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
[4] https://blog.kissmetrics.com/speed-is-a-killer/
[5] http://andrewchen.co/new-data-on-push-notification-ctrs-shows-the-best-apps-perform-4x-better-than-the-worst-heres-why-guest-post/
[6] https://jakearchibald.github.io/isserviceworkerready/

Eyeflow: How do people scan your site?

dcblog-eyeflowIt takes 1/5 of a second for someone to form an impression of your site

 

In another 2.6 seconds, they will have located the content that interests them.

 

In that time span of 2.8 seconds the user has scanned the page, made some judgments, and is ready to move deeper into your site.

 

Or move on in search of a better site.

 

Our point: Every aspect of content placement on a home page or landing page has to be scrutinized because even the smallest decisions can affect performance.

 

So let’s take a look at exactly what’s happening in those 2.8 seconds and talk about a few of the essentials of eyeflow.

 

1. Scanning vs Reading

 

Scanning a page – as opposed to reading it – is how people seek content. Jakob Nielsen pointed out many years ago why we scan rather than read but the dominant reason is twofold: Time pressures, and the fact that reading a computer screen is tiring to the eyes.

 

When scanning, the eye generally makes short, rapid eye movements as it moves across a web page, seeking the touchstones and visual cues that signal the content environment is relevant and useful.

 

2. From Gutenberg’s “Z” to Nielsen’s “F”

 

Gutenberg’s diagram is the basis for how we are taught to enter a web page visually.

 

Our eye tends to move in a “Z” shaped pattern, starting in the upper left corner – because that’s how we read – and moving right, left, and right. [This explains why, in print advertising, the logo is often positioned lower right.]

 

But our exposure to the web – and especially to search pages – has reshaped our eyeflow into the form of an “F.”

 

As you’d expect from the shape of the “F,” – as opposed to a “Z” – the eye tends to look across the screen twice and then stop, rather than completing the scan in the lower right corner.

 

Nielsen pointed this out in 2006 – viewers often start in the upper left corner and go right. Then they come back and follow a second movement, also left to right. Then they return to the left side and scan vertically.

 

Side point: Viewer eyeflow can change based on needs. General browsing eye patterns are slower, and more random than information-seeking patterns, which tend to be quicker and centered on navigation. Search page eyeflow tends to have a “hot potato” effect. If you’re redesigning a site, usability testing can provide clarity around how your content is being scanned..

 

3. Type hierarchy matters. Big Time.

 

Viewers look for and read headlines as an instinctive process for locating the main message of a page.

 

Subheads tend to be scanned as viewers go deeper into subpages, looking for relevant content – so don’t write meaningless subheads. Make sure each subhead actually encapsulates the written content below it. This builds reader trust. And keep your fonts simple and consistent so readers begin to feel confident in the aesthetics and standards of the site.

 

4. White space

 

Clients tend to overfill web pages, forgetting that unoccupied space creates a sense of calmness, focus, and makes reading and visual digestion easier.

 

We advise clients to think of white space not just in terms of large areas, but also in terms of column spacing, leaving room around graphics, and even in terms of paragraph length. Short, one and two-sentence paragraphs surrounded by white space accelerate the read and make viewers feel they are getting somewhere.

 

The elements of commanding attention and directing viewers’ eyeballs to where they need to go is a big topic.

 

Too big, in fact, for a blog.

 

But if you want to get into it deeper, we suggest you stop by for a beverage.

4 NEW RULES FOR SEO

dcblog-panda

It All Comes Down to Content

You’ve heard it ad nauseam, but today, when it comes to being the highest ranked on a search engine result page, content really is king.

With Google’s new SEO algorithm introduced in Google Panda content is being scrutinized as never before.

Panda evaluates UX in its analysis of site content. So it’s not just the range of content your site features, it’s the quality. That means a lot of site managers need to rethink their content strategy.

The rules have changed. And now, SEO thinking has to change, too. Here’s a guide to 4 critical new rules of SEO as seen by the folks here at drinkcaffeine.

The “Best of the Best” Rule

To maintain basic competitive positioning in search hierarchy, your site content must be as good as the best results on any particular search page. If you can’t consistently maintain this standard against the keywords used to explore your category, the hard truth is you do not have the opportunity to rank.

Search is becoming a mature category. Lots of sites have good, unique content. But it’s not enough to get to the top. You should aim to be the absolute best and then some.

If you don’t think you have the content to fulfill the keywords that drive your site traffic and your industry, then go back to the drawing board and review what it will take to bring your content to the next level.

The Right Links

 In the new world of Panda, links matter. Panda will discern between links that are authoritative and ones that are not.

Google, again valuing the best user experience, favors sites that are organically linked to by users. In fact, if you’re not earning links organically, you may even be earning undesirable links that Google is penalizing you for by lowering your Search Engine Results Page (SERP) ranking.

It’s an uphill battle to earn links with anything less than the best content, but there’s a reason why getting to the top of the hill is worthwhile. And users are already beginning to notice that top-ranked players on any given SERP have the goods.

Think mobile

User experience more than ever relies on mobile-friendly sites, pages that load instantly, and device rendering. Don’t forget this aspect of UX as you develop your site. Panda certainly hasn’t.

So how do you become the best?

The shifts in Google’s algorithm require us all to look in the mirror and examine content more critically than ever before. Here are some critical questions.

  • Do my pages answer specific questions or call outs that a user may be searching for? A user problem-solution model is a powerful way to earn user trust, and links.
  • What’s my site like from a UX perspective? Are pages loading quickly? Is the navigation really intuitive and based on what users want?
  • Where is my content being sourced from? Content that pulls from trusted, branded sources will be far superior to the content that has no anchor to solid data.
  • Am I communicating visually? As we mentioned, people want their information delivered quickly and efficiently. Tidbits of text information will seldom surpass the power of an infographic or graph.
  • What am I missing? What are the top SERP leaders missing that you can provide? This is how you’ll set yourself apart.

When it comes to building out your best content, we’re your search engine optimizers. Search drinkcaffeine for your best result.