Tag Archives: network

Monthly Web Development Update 3/2018: Service Workers, Building A CDN, And Cheating At Design

Service Worker is probably one of the most misrepresented technologies we currently have. When I hear people talking about it, the topic almost always revolves around serving an app when a user is offline. However, Service Worker can do so much more than that, and every week I come across new articles that show how powerful the technology really is.

This month, for example, we can learn how to use Service Worker for cross-tab messaging and to load off requests into the background with the Background Sync API. I think the toolset we now have in our browsers already allows us to build great experiences regardless of the network state. Now it’s up to us to make the experiences so great that users truly love them. And that’s probably the hardest part.

News

Sketch 49
Sketch 49 has arrived, and with it comes the new Prototyping in Sketch feature which lets you see the entire flow in action. (Image credit)

General

  • Ed Ellson examined Chrome’s Background Sync API and the retry strategy it uses to perform a request. By allowing synchronization in the background after a first attempt has failed, the API helps us improve the browsing experience for users who go offline or are on unstable connections.

UI/UX

Cheating At Design
Use color and weight to create visual hierarchy instead of size is only one of the seven practical tips for cheating at design that Adam Wathan and Steve Schoger share. (Image credit)

Security

  • With GraphQL you can query exactly what you want whenever you want. This is amazing for working with an API but also has complex security implications. Instead of asking for legitimate, useful data, a malicious actor could submit an expensive, nested query to overload your server, database, network, or all of these. To prevent this from happening, Max Stoiber shows us how we can secure the GraphQL API in our projects.

Privacy

  • WebKit is introducing the Storage Access API. The new API targets one of the major issues with Safari’s Intelligent Tracking Protection (ITP): Identifying users who are logged in to a first-party service but view content of it embedded on a third party (YouTube videos on a blog, for example). The Storage Access API allows third-party embeds to request access to their first-party cookies when the user interacts with them. A good solution to protect user privacy by default and allow exceptions on request.

Web Performance

  • Janos Pasztor built his own Content Delivery Network because he thinks it can be a better solution than using existing third parties. The code for the CDN of his personal website is now available on Github. A nice web performance article that looks at common solutions from a different angle.
  • A year after Facebook’s announcement to broadly use Cache-Control: Immutable, Paul Calvano examined how widespread its usage is on the web — apart from the few big players. Interesting research and it’s still sad to see that this useful performance tool is used so little. At Colloq, we use it quite a lot, which saves us a lot of traffic and load on our servers and enables us to serve a lot of pages nearly instantly to recurring users.
Global stats of a self-built CDN
Global stats for the custom CDN that Janos Pasztor built. (Image credit)

HTML & SVG

JavaScript

CSS

Accessibility

Accessibility Checklist
The Accessibility Checklist helps build accessibility into your process no matter your role or stage in a project. (Image credit)

Work & Life

  • This week I read an article by Alex Duloz, and his words still stick with me: “When we develop a new application, when we post content on the Internet, whatever we do that people will have access to, we should consider just for a minute if our contribution adds up to the level of dumbness kids/teenagers are exposed to. If it does, we should refrain from going live.” The truth is, most of us, including me, don’t consider this before posting on the Internet. We create funny things, share funny pictures and try to get fame with silly posts. But in reality, we shape society with this. Let’s try to provide more useful resources and make the consumption of this more enjoyable so young people can profit from our knowledge and not only view things we think are funny. “We should always consider how teenagers will use what we release.”
  • The MIT OpenCourseWare released a lot of free audio and video lectures. This is amazing news and makes great content available to broader masses.
  • Jake Knapp says great work requires idealism and cynicism and has strong arguments to back up this theory. An article worth reading.
  • There’s an important article on how unhappiness has grown in America’s population since around the year 2000. It reveals that while income inequality might play a role, the more important aspect is that young people who use a lot of digital media are unhappier than those who use it only up to an hour a day. Interestingly, people who don’t use digital media at all, are unhappy, too, so the outcome of this could be that we should try to use digital media only moderately — at least in our private lives. I bet it’ll make a big difference.
  • Following the theory of Michael Bradley, projects don’t necessarily need a roadmap for success. Instead, he suggests to create a moral compass that points out why the project exists and what its purpose is.

Going Beyond…

We hope you enjoyed this Web Development Update. The next one is scheduled for April 13th. Stay tuned.

Excerpt from – 

Monthly Web Development Update 3/2018: Service Workers, Building A CDN, And Cheating At Design

How To Streamline WordPress Multisite Migrations With MU-Migration

Migrating a standalone WordPress site to a site network (or “multisite”) environment is a tedious and tricky endeavor, the opposite is also true. The WordPress Importer works reasonably well for smaller, simpler sites, but leaves room for improvement. It exports content, but not site configuration data such as Widget and Customizer configurations, plugins, and site settings. The Importer also struggles to handle a large amount of content. In this article, you’ll learn how to streamline this type of migration by using MU-Migration, a WP-CLI plugin.

Link: 

How To Streamline WordPress Multisite Migrations With MU-Migration

How To Make A Dynamic Website Become Static Through A Content CDN

Smashing Magazine gave us a little surprise recently: Its website has been completely overhauled, switching away from WordPress to Netlify. One of the several reasons for the move is cost: Netlify allows for a static version of a website, which can be hosted directly on a content delivery network (CDN), reducing the number of web servers that are needed. In addition, because CDNs are located near users, accessing the website becomes faster.

Read more: 

How To Make A Dynamic Website Become Static Through A Content CDN

Designing Ethics: Shifting Ethical Understanding In Design

The influence of design is expanding beyond the realms of typography and objects and into healthcare, public policy, education, financial services, and more. Designers working in these emerging design fields are responsible for projects that have significant and fundamental impact on the quality of people’s lives with clear ethical implications.
In healthcare, for example, designers are responsible for creating everything from the industrial designer’s medical device that keeps a heart beating to the service designer’s physical layout of an operating room.

View original article:  

Designing Ethics: Shifting Ethical Understanding In Design

Monthly Web Development Update 11/2017: Browser News, KRACK and Vary Header Caching

Editor’s Note: Our dear friend Anselm Hannemann summarizes what happened in the web community in the past few weeks in one handy list, so that you can catch up on everything new and important. Enjoy!
Welcome back to our monthly reading list. Before we dive right into all the amazing content I stumbled upon — admittedly, this one is going to be quite a long update — I want to make a personal announcement.

Original link: 

Monthly Web Development Update 11/2017: Browser News, KRACK and Vary Header Caching

Documenting Components In Markdown With Shadow DOM

Some people hate writing documentation, and others just hate writing. I happen to love writing; otherwise, you wouldn’t be reading this. It helps that I love writing because, as a design consultant offering professional guidance, writing is a big part of what I do. But I hate, hate, hate word processors.

Documenting Components In Markdown With Shadow DOM

When writing technical web documentation (read: pattern libraries), word processors are not just disobedient, but inappropriate. Ideally, I want a mode of writing that allows me to include the components I’m documenting inline, and this isn’t possible unless the documentation itself is made of HTML, CSS and JavaScript. In this article, I’ll be sharing a method for easily including code demos in Markdown, with the help of shortcodes and shadow DOM encapsulation.

The post Documenting Components In Markdown With Shadow DOM appeared first on Smashing Magazine.

View article:  

Documenting Components In Markdown With Shadow DOM

The Crazy Egg Guide to Reddit Content Marketing

Reddit Content Marketing Guide

Possibly the largest group of self-contained communities on the Internet, it can be seen as a microcosm of the Internet in itself. It has its own lingo, its own inside jokes, its own history. Its special class of geeky, socially inept, smug, arrogant, yet revered users are called “neckbeards”, while everyone else are just called “Redditors”. It’s possibly the Internet’s greatest spawning ground of memes — only the dirtier, more underground imageboard “4chan” has as much influence in the subculture-sphere. It is, in fact, one of the most popular and heavily trafficked (not to mention plain old fun) websites in…

The post The Crazy Egg Guide to Reddit Content Marketing appeared first on The Daily Egg.

View original: 

The Crazy Egg Guide to Reddit Content Marketing

Web Development Reading List #177: Getting Started With Components, CT-Header, And New Regular Expressions

From time to time, we need to take some time off, and actually, I’m glad that this reading list is a bit shorter as the ones you’re used to. Because one thing that really stuck with me this week was Eric Karjaluoto’s article.
In his article, he states that, “Taking pride in how busy we are is one of the worst ideas we ever had.” So, how about reading just a few articles this week for a change and then take a complete weekend off to recharge your battery?

Read this article:

Web Development Reading List #177: Getting Started With Components, CT-Header, And New Regular Expressions

Thumbnail

PPC Landing Page Magic: Secrets Revealed [GIFOGRAPHIC]

This marketing infographic is part of KlientBoost’s 25-part Marketing Advent Calendar. Sign up here to receive a new gifographic once a day in your inbox.

As a kid who was fascinated with the magic store, it’s kind of surprising that I still don’t know how magicians do certain tricks. But it’s probably because as an adult, I’ve spent most of my time trying to master one magic trick:

Making more money appear — both for my PPC agency and for our clients.

How do we do it?

A large part of the magic comes from the landing pages our CRO team designs and tests. And today I want to reveal all the tricks that go into a high-converting landing page to make you the David Copperfield of PPC landing page testing.

(Keep reading below the gifographic for more explanation.)

ezgif-com-878a1ae317

Geographic specificity: Get more local love

When your PPC campaigns and landing page work together on a geographic level, you unleash serious conversion potential.

To help illustrate, imagine these two scenarios:

  1. A nationwide PPC campaign that goes to a nationwide landing page
  2. A city-specific PPC campaign that goes to a city-specific landing page

Which one do you think will perform better?

I think the second would — and we have 100+ clients that would agree. By becoming more granular with your PPC campaigns, you’re able to make the visitor believe that you’re local (even if you’re not).

Take this example of using geographic-specific area code phone numbers on landing pages versus a generic 800 number:

conversion-rate-for-generic-vs-local-numbers
This table shows conversion rates for landing pages displaying generic 800 phone number versus landing pages with a local number. Image source.

And phone numbers are only a start. Test geographically-specific PPC ad copy, landing page headlines and even visuals.

We use Unbounce’s Dynamic Text Replacement (DTR) to help us easily launch dynamic landing pages and prevent traffic dilution that slows down statistical significance.

Which brings us to our next trick…

Dynamic text replacement: Less work, more fun

Dynamic text replacement allows you to swap out the text on your landing page with keywords from your PPC campaigns.

By making small adjustments to your PPC campaign URLs, you can make one landing page specific to hundreds of keywords you’re bidding on, resulting in a landing page that show exactly what visitors searched for:

dynamic-text-replacement-example-url
With DTR, you can turn one landing page into 100 landing pages.

Here’s an example of an outdoors company using DTR to “magically” create super-relevant landing pages.

If the user searched for “hiking backpack,” this is the landing page they’ll see:

dtr-examlpe-hiking-backpack

And if they searched for “trekking backpack”?

dtr-example-trekking-backpack

Boom.

Notice how nothing changed but the text on those two pages?

Read a full explanation of this “magic trick” here.

Multi-step landing pages

You’ve heard how reducing the amount of form fields will help improve your conversion rates, right?

few-form-fields-quotes

But what if I told you that there’s a way to add more fields (thereby better qualifying prospects) while still improving conversion rates?

That’s some true David Copperfield s*** right there.

giphy
I know that’s not David Copperfield. Just trying to see if you’re awake. GIF source.

Multi-step landing pages can help you achieve just this by asking for a little information upfront, then progressively asking for more and more. Dr. Robert Cialdini, author of Influence: The Power of Persuasasion, explains that this technique works because of a principle he calls Commitment and Consistency:

ciadini-quote-commitment-consistency

On our own landing pages, we start by asking questions that are easy to answer, and then progressively get more personal.

We’ve found that these “micro conversions” make it more likely for the prospect to then later fill out more personal details such as their name and contact information:

multi-step-landing-page-threat
We’ve built all our lead gen efforts around multi-step landing pages. Image source.

Call to action temperature testing

A common mistake a lot of our clients make prior to working with us is that they use the same call to action for all their PPC traffic: search, social, video and display.

This is problematic because different types of PPC traffic have different levels of intent.

For example, people seeing your ads through the Search Network can be people really close to converting (depending on keyword intent), but the Display Network typically has visitors who are a few steps behind. (I wrote about this on the Unbounce blog before.)

klientboost-ppc-thermometer
We have found that display leads are typically colder than leads acquired through the search network.

If a certain PPC channel isn’t converting for you, sometimes switching up the offer — and the call to action — can make all the difference.

We’ve found that the offers on the left work well for cold leads, whereas the offers on the right work better for warm leads:

klientboost-match-ppc-channel-temperature
We made this to use internally at KlientBoost.

As with most PPC tactics, this requires a bit of testing. And don’t forget to have a means of nurturing cold leads down the funnel.

Local visuals: Make ‘em feel at home

Remember how you can improve conversion rates by changing phone numbers and headlines to appear more local to the visitor’s location?

You can also do that with your hero shot and other visuals you’re using on your landing page.

We ran a test for a roofing company who advertised in several states. Because we were able to split up the PPC traffic based on geography, we were able to funnel all visitors to a dedicated landing with visuals that matched the local feel:

local-visuals-a-b-test

The result?

Conversion rates increased by 22%.

It seems so simple, yet it’s a bit of work to set up.

But the payoff is immense.

Hidden fields sales tracking

This very moment, you’re likely bidding on multi intent keywords that may bring you conversions (leads, demos, or trials), but will never turn into sales.

But with hidden fields sales tracking like Google’s ValueTrack parameters, you’re able to create hidden fields on your landing page to capture lead information, along with other nifty data, like:

  • The keyword they typed in
  • The device they were using
  • The landing page URL they converted on
  • The geographic location they were in

With your CRM lead entry that now has all that additional bulleted info, you’re able to go back to your PPC accounts and learn not just what keyword gave you the lead, but what keyword gave you the sale in other words, which of your keywords have the highest closing rate.

With that information, you’ll find that you’re able to afford higher CPAs for certain conversions compared to others, and this will ultimately help you get higher volumes of the right type of conversions.

How’d you do that?

PPC landing page testing can be complex, but these few tricks above are what help us double the performance for our clients.

These tips will help you customize your landing pages, resulting in better marketing experiences that convert better.

So you can pull more rabbits conversions out of your hat PPC campaigns.

Embed this gifographic on your site (copy and paste the code).

See original: 

PPC Landing Page Magic: Secrets Revealed [GIFOGRAPHIC]

True Lies Of Optimistic User Interfaces

Three user interfaces (UIs) go to a pub. The first one orders a drink, then several more. A couple of hours later, it asks for the bill and leaves the pub drunk. The second UI orders a drink, pays for it up front, orders another drink, pays for it and so on, and in a couple of hours leaves the pub drunk. The third UI exits the pub already drunk immediately after going in — it knows how the pubs work and is efficient enough not to lose time.

See the original article here: 

True Lies Of Optimistic User Interfaces