Tag Archives: chrome

Building Inclusive Toggle Buttons

Some things are either on or off and, when those things aren’t on (or off), they are invariably off (or on). The concept is so rudimentary that I’ve only complicated it by trying to explain it, yet on/off switches (or toggle buttons) are not all alike. Although their purpose is simple, their applications and forms vary greatly.

Building Inclusive Toggle Buttons

In this inaugural post, I’ll be exploring what it takes to make toggle buttons inclusive. As with any component, there’s no one way to go about this, especially when such controls are examined under different contexts. However, there’s certainly plenty to forget to do or to otherwise screw up, so let’s try to avoid any of that.

The post Building Inclusive Toggle Buttons appeared first on Smashing Magazine.

Link: 

Building Inclusive Toggle Buttons

Infographic: The Evolution of Web Design

26 Years. Over a quarter century. That’s how long it’s been since the publication of the first website in 1991, info.cern.ch. That’s right. That right there is a link to the very first website ever published. Since then we’ve created banner ads, pop-ups, CAPTCHAs, social media, and countless layers of the front end tech stack we enjoy today with HTML5, CSS, and JavaScript. Let’s also ponder what trends web design will follow during the next quarter century. We are definitely getting a VR enabled web. Check out the VRVCA, a consortium of venture capital funds, including HTC and NVIDIA, who…

The post Infographic: The Evolution of Web Design appeared first on The Daily Egg.

Link: 

Infographic: The Evolution of Web Design

How to Increase Conversions, Sign Ups, and Subscriptions with Web Push Notifications

web push notifications

It’s Friday afternoon, and Bill is frantically writing a rebuttal to a fiery political thread on Facebook. Smashing his keyboard violently with fingers of fury. Around 3 pm, a message flies in on the upper right-hand corner of his computer screen updating him of the final score of the Giants vs. Phillies game. “Giants lost?!? What?” At 4:30, another notification flies in telling him the pet food he was browsing online earlier in the week is available at his local pet store and he can grab it on the drive home. “Gizmo’s gun’ be happy tonight heh heh. JUMBONE for…

The post How to Increase Conversions, Sign Ups, and Subscriptions with Web Push Notifications appeared first on The Daily Egg.

Original article: 

How to Increase Conversions, Sign Ups, and Subscriptions with Web Push Notifications

Got A Conversion Question for Neil Patel? Ask Him During The Crazy Egg Conversion Talks

conversion talks with Neil Patel

Got conversion rate optimization questions? Wanna ask Neil Patel for help? Then join us for our weekly Crazy Egg Conversion Talks. Anyone can attend and ask as many questions as they’d like! Our first talk will be on May 5th, 2017 at 10 AM Pacific. Here are a few more details about the talks: Frequency: Weekly Duration: 1 Hour No sign-up required Learn From Neil Patel – Ask Him Direct Questions! Neil has been continually optimizing websites for over a decade and is an industry leader when it comes to traffic generation, growth hacks and conversion funnel improvements. Plus, he’s…

The post Got A Conversion Question for Neil Patel? Ask Him During The Crazy Egg Conversion Talks appeared first on The Daily Egg.

See original article here:  

Got A Conversion Question for Neil Patel? Ask Him During The Crazy Egg Conversion Talks

How to do server-side testing for single page app optimization

Reading Time: 5 minutes

Gettin’ technical.

We talk a lot about marketing strategy on this blog. But today, we are getting technical.

In this post, I team up with WiderFunnel front-end developer, Thomas Davis, to cover the basics of server-side testing from a web development perspective.

The alternative to server-side testing is client-side testing, which has arguably been the dominant testing method for many marketing teams, due to ease and speed.

But modern web applications are becoming more dynamic and technically complex. And testing within these applications is becoming more technically complex.

Server-side testing is a solution to this increased complexity. It also allows you to test much deeper. Rather than being limited to testing images or buttons on your website, you can test algorithms, architectures, and re-brands.

Simply put: If you want to test on an application, you should consider server-side testing.

Let’s dig in!

Note: Server-side testing is a tactic that is linked to single page applications (SPAs). Throughout this post, I will refer to web pages and web content within the context of a SPA. Applications such as Facebook, Airbnb, Slack, BBC, CodeAcademy, eBay, and Instagram are SPAs.


Defining server-side and client-side rendering

In web development terms, “server-side” refers to “occurring on the server side of a client-server system.”

The client refers to the browser, and client-side rendering occurs when:

  1. A user requests a web page,
  2. The server finds the page and sends it to the user’s browser,
  3. The page is rendered on the user’s browser, and any scripts run during or after the page is displayed.
Static app server
A basic representation of server-client communication.

The server is where the web page and other content live. With server-side rendering, the requested web page is sent to the user’s browser in final form:

  1. A user requests a web page,
  2. The server interprets the script in the page, and creates or changes the page content to suit the situation
  3. The page is sent to the user in final form and then cannot be changed using server-side scripting.

To talk about server-side rendering, we also have to talk a little bit about JavaScript. JavaScript is a scripting language that adds functionality to web pages, such as a drop-down menu or an image carousel.

Traditionally, JavaScript has been executed on the client side, within the user’s browser. However, with the emergence of Node.js, JavaScript can be run on the server side. All JavaScript executing on the server is running through Node.js.

*Node.js is an open-source, cross-platform JavaScript runtime environment, used to execute JavaScript code server-side. It uses the Chrome V8 JavaScript engine.

In laymen’s (ish) terms:

When you visit a SPA web application, the content you are seeing is either being rendered in your browser (client-side), or on the server (server-side).

If the content is rendered client-side, JavaScript builds the application HTML content within the browser, and requests any missing data from the server to fill in the blanks.

Basically, the page is incomplete upon arrival, and is completed within the browser.

If the content is being rendered server-side, your browser receives the application HTML, pre-built by the server. It doesn’t have to fill in any blanks.

Why do SPAs use server-side rendering?

There are benefits to both client-side rendering and server-side rendering, but render performance and page load time are two huge pro’s for the server side.

(A 1 second delay in page load time can result in a 7% reduction in conversions, according to Kissmetrics.)

Server-side rendering also enables search engine crawlers to find web content, improving SEO; and social crawlers (like the crawlers used by Facebook) do not evaluate JavaScript, making server-side rendering beneficial for social searching.

With client-side rendering, the user’s browser must download all of the application JavaScript, and wait for a response from the server with all of the application data. Then, it has to build the application, and finally, show the complete HTML content to the user.

All of which to say, with a complex application, client-side rendering can lead to sloooow initial load times. And, because client-side rendering relies on each individual user’s browser, the developer only has so much control over load time.

Which explains why some developers are choosing to render their SPAs on the server side.

But, server-side rendering can disrupt your testing efforts, if you are using a framework like Angular or React.js. (And the majority of SPAs use these frameworks).

The disruption occurs because the version of your application that exists on the server becomes out of sync with the changes being made by your test scripts on the browser.

NOTE: If your web application uses Angular, React, or a similar framework, you may have already run into client-side testing obstacles. For more on how to overcome these obstacles, and successfully test on AngularJS apps, read this blog post.


Testing on the server side vs. the client side

Client-side testing involves making changes (the variation) within the browser by injecting Javascript after the original page has already loaded.

The original page loads, the content is hidden, the necessary elements are changed in the background, and the ‘new’ version is shown to the user post-change. (Because the page is hidden while these changes are being made, the user is none-the-wiser.)

As I mentioned earlier, the advantages of client-side testing are ease and speed. With a client-side testing tool like VWO, a marketer can set up and execute a simple test using a WYSIWYG editor without involving a developer.

But for complex applications, client-side testing may not be the best option: Layering more JavaScript on top of an already-bulky application means even slower load time, and an even more cumbersome user experience.

A Quick Hack

There is a workaround if you are determined to do client-side testing on a SPA application. Web developers can take advantage of features like Optimizely’s conditional activation mode to make sure that testing scripts are only executed when the application reaches a desired state.

However, this can be difficult as developers will have to take many variables into account, like location changes performed by the $routeProvider, or triggering interaction based goals.

To avoid flicker, you may need to hide content until the front-end application has initialized in the browser, voiding the performance benefits of using server-side rendering in the first place.

WiderFunnel - client side testing activation mode
Activation Mode waits until the framework has loaded before executing your test.



When you do server-side testing, there are no modifications being made at the browser level. Rather, the parameters of the experiment variation (‘User 1 sees Variation A’) are determined at the server route level, and hooked straight into the javascript application through a service provider.

Here is an example where we are testing a pricing change:

“Ok, so, if I want to do server-side testing, do I have to involve my web development team?”

Yep.

But, this means that testing gets folded into your development team’s work flow. And, it means that it will be easier to integrate winning variations into your code base in the end.

If yours is a SPA, server-side testing may be the better choice, despite the work involved. Not only does server-side testing embed testing into your development workflow, it also broadens the scope of what you can actually test.

Rather than being limited to testing page elements, you can begin testing core components of your application’s usability like search algorithms and pricing changes.

A server-side test example!

For web developers who want to do server-side testing on a SPA, Tom has put together a basic example using Optimizely SDK. This example is an illustration, and is not functional.

In it, we are running a simple experiment that changes the color of a button. The example is built using Angular Universal and express JS. A global service provider is being used to fetch the user variation from the Optimizely SDK.

Here, we have simply hard-coded the user ID. However, Optimizely requires that each user have a unique ID. Therefore, you may want to use the user ID that already exists in your database, or store a cookie through express’ Cookie middleware.

Are you currently doing server-side testing?

Or, are you client-side testing on a SPA application? What challenges (if any) have you faced? How have you handled them? Do you have any specific questions? Let us know in the comments!

The post How to do server-side testing for single page app optimization appeared first on WiderFunnel Conversion Optimization.

Continue reading – 

How to do server-side testing for single page app optimization

Creating One Browser Extension For All Browsers: Edge, Chrome, Firefox, Opera, Brave And Vivaldi

In today’s article, we’ll create a JavaScript extension that works in all major modern browsers, using the very same code base. Indeed, the Chrome extension model based on HTML, CSS and JavaScript is now available almost everywhere, and there is even a Browser Extension Community Group working on a standard.

Creating One Browser Extension For All Browsers: Edge, Chrome, Firefox, Opera, Brave And Vivaldi

I’ll explain how you can install this extension that supports the web extension model (i.e. Edge, Chrome, Firefox, Opera, Brave and Vivaldi), and provide some simple tips on how to get a unique code base for all of them, but also how to debug in each browser.

The post Creating One Browser Extension For All Browsers: Edge, Chrome, Firefox, Opera, Brave And Vivaldi appeared first on Smashing Magazine.

Visit source: 

Creating One Browser Extension For All Browsers: Edge, Chrome, Firefox, Opera, Brave And Vivaldi

Experimenting With speechSynthesis

I’ve been thinking a lot about speech for the last few years. In fact, it’s been a major focus in several of my talks of late, including my well-received Smashing Conference talk “Designing the Conversation.” As such, I’ve been keenly interested in the development of the Web Speech API.

Experimenting With speechSynthesis

If you’re unfamiliar, this API gives you (the developer) the ability to voice-enable your website in two directions: listening to your users via the SpeechRecognition interface and talking back to them via the SpeechSynthesis interface. All of this is done via a JavaScript API, making it easy to test for support. This testability makes it an excellent candidate for progressive enhancement, but more on that in a moment.

The post Experimenting With speechSynthesis appeared first on Smashing Magazine.

Original article – 

Experimenting With speechSynthesis

GPU Animation: Doing It Right

Most people now know that modern web browsers use the GPU to render parts of web pages, especially ones with animation. For example, a CSS animation using the transform property looks much smoother than one using the left and top properties. But if you ask, “How do I get smooth animation from the GPU?” in most cases, you’ll hear something like, “Use transform: translateZ(0) or will-change: transform.”

gpu-animation-done-right

These properties have become something like how we used zoom: 1 for Internet Explorer 6 (if you catch my drift) in terms of preparing animation for the GPU — or compositing, as browser vendors like to call it. But sometimes animation that is nice and smooth in a simple demo runs very slowly on a real website, introduces visual artifacts or even crashes the browser. Why does this happen? How do we fix it? Let’s try to understand.

The post GPU Animation: Doing It Right appeared first on Smashing Magazine.

Follow this link:  

GPU Animation: Doing It Right

Eliminate Jargon on Your Landing Pages With Our Free Chrome Extension

What would you think if you wound up on this landing page?

jargon-filled-landing-page copy

Check out some of the terms being used:

“The Next Generation of Awesome”
“Bleeding edge solution”
“Age of disruption”
“World class features”

Might your BS detector start going off?

These words are superlatives — meaningless filler. The language is flowery (and not in a good way).

And while this is an extreme example, jargonistic, superlative-laden landing pages are everywhere.

They lack specificity and don’t drive home any message. They aren’t persuasive and their unique value proposition is a blur. They make people feel lost  — like they just crawled out of a fallout shelter for the first time in 35 years.

brendan-fraser-lost
Wait, where am I?

The worst part? You could have meaningless drivel on your landing page and not even know it.

No sweat. We created a Chrome extension that can help (props to Henneke Duistermaat who inspired this whole idea with her post 17 Words to Stop Using on Your Landing Pages).

Here’s how it works:

  1. Download and install Unbounce’s Dejargonator Chrome Extension
  2. Run it on any landing page or website — offending phrases will be highlighted in red. (You can test it on this extra sleazy page here.)
  3. Hover over the red text and see what’s wrong:
  4. dejargonator-screenshot-2

  5. Finally, update your page to be
    • Less sleazy and superlative-y
    • More specific (and thereby more persuasive)

Simple enough? Download the plugin below.

This article: 

Eliminate Jargon on Your Landing Pages With Our Free Chrome Extension

Turn Your AMP Up To 11: Everything You Need To Know About Google’s Accelerated Mobile Pages


In May of 2015, Facebook unveiled its new in-app publishing platform, Instant Articles. A month later, Apple declared that the old Newsstand experience (essentially a fancy folder full of news apps) would be replaced in iOS 9 with a brand-new news aggregation and discovery platform called Apple News.

Turn Your AMP Up To 11: Everything You Need To Know About Google's Accelerated Mobile Pages

Four months later, it was Google’s turn to announce its own, somewhat belated but no less ambitious, plan to revolutionize mobile news consumption with an open-source web-based solution called Accelerated Mobile Pages, or AMP. In just a few months, we’ve seen the relative tranquility of mobile digital publishing erupt into yet another full-scale platform war as Facebook, Apple and now Google compete for both the loyalty of publishers and the attention of readers.

The post Turn Your AMP Up To 11: Everything You Need To Know About Google’s Accelerated Mobile Pages appeared first on Smashing Magazine.

Link: 

Turn Your AMP Up To 11: Everything You Need To Know About Google’s Accelerated Mobile Pages