“Engaging” could easily be called “the word of 2016” in the digital world!
Everything you did, as a website owner, a website developer or a web designer in Toronto has been oriented towards (and will continue to be in 2017, too) getting your audience engaged, right?
Which have been your most efficient “tools” for keeping with your own audience “engaged”?
“Video” and “Visual storytelling!” Bravo! Correct answer!
It's been a while since Adobe allowed you to combine these two powers and to boost all your content marketing plans with the power of video-storytelling.
It brought you Spark Video: the app that helped you engage with your users, inspire them and motivate them through customized animated videos. They used to “tell” your story and therefore to pull your users into the world you created for them and to get your message conveyed to them far more easily.
Such powerful visual aimed at adding meaning and triggering emotions!
Now Adobe strikes again!
It announced on their blog a major update to Spark Video: enabling users to craft beautiful, powerful video clips (that will gradually replace the now “old” animated videos).
Say “Hello!” to a new era of video-storytelling!
Say “Hello!” to a new wave of traffic on your website and not just any type of traffic, but one made of loyal users, “seduced” by and committed to your brand thanks to "the power of video clips”.
Before we go on with the step-by-step guide on how you get to create video-clips in Spark Video, let's sum up, very briefly, what you've been able to create and to share with this app up to now (when it got seriously upgraded):
Animated videos featuring:
icons
text
narration
In a nutshell: you've been able to breathe life into your animated videos by adding all the features specific to immersive, interactive visual storytelling.
Now here's how you can flesh out stunning video-clips that will help you “lure” new users, bond with your users, engage them and keep them engaged to your brand, using Spark Video:
1. Add Your Video Clips Faster Than You Say “Spark”
Adding a new video clip is nothing but a sequence of two quick steps:
1. you first add a slide to your Spark Video projects
2. you browse through the video collection on your device and pick your target one
A way too tempting feature: as compared to “standard” video editors, using Spark Video you get to cut your video into a series of slides varying in duration times.
2. Make a New Point Over The Same Video Clip
How? Nice and easy: you simply click on the “continue” button and select a new slide, then you coat it with your visually-pleasing icon, with your compelling text and with narration and it's now that you can adjust the volume, too.
3. Trim It To Your Liking
Get the most out of Spark Video's one-touch trimming feature for customizing precisely those points where your video clip starts and ends.
4. Breathe Life Into Your Video Clip With Narration
It's now easier than ever to add voices to your video project: just tap on the record button and start telling your story to your audience. Next, with another quick tap you get to align the narration's length to the video's length.
Can you already predict your brighter future as Toronto web designer who's been “slaving away” to constantly come up with interactive and engaging web design? A type of design that should “tell” a meaningful story, one that should trigger emotions in the audience?
5. Craft The Desired Mood Through Music
“What possibly could be so engaging about a video clip with no music?” your users might ask themselves.
Therefore, add the background music, too, the one that will help you craft the right mood for your video's watchers.
How? Quick and easy: add either your preferred track saved on your device or pick one of the app's suggestions!
If you really want to go deeper with your video clip's customization through music, get this whole process even more refined: use Spark Video's mini-feature which allows you to highlight and therefore to draw your audience's attention to key moments of sound from your video clip.
Therefore, instead of getting overwhelmed by data forecasting VIDEO-s “dictatorship” in the digital world, you'd better embrace the future of the video: video clips!
Here's how this video-related data looks like now, at the end of 2016:
it's been proven that if you “upgrade” your landing page with a video your conversion rate will increase by 80%
by 2019 video will represent up to 80% of global Internet traffic
data proves that in just one month over 3 million small businesses shared a video on their Facebook accounts
So, how about taking the new Spark Video for a “test drive”?
Have some fun, try out all its new features and put together some sample videos clips so that you'll learn to master the upgraded Spark Video and to get the most out of its improved features by the time it becomes a huge trend in web design and development in 2017.
Adrian Ababei / Dec 22'2016
Let me guess: your whole work as a developer (and even more so if you're a front end developer) depends on and relies on NPM, the "Holly Grail" of JavaScript package managers!
How about Facebook's own (not that) recently released package manager?
Has it even stirred your attention, just to see what new features it comes equipped with and how/if it can improve your whole workflow? Or have you stubbornly overlooked it, sticking to your way too familiar, already tested JavaScript package manager?
But what if it actually helps you handle your Javascript files much faster (thus gaining time, which is gold especially when you're dealing with huge web projects)? What if it is more secured? What if you discover that it's a much more simplified version of the standard "monopolizing" NPM?
If you're willing to continue to handle your Javascript frameworks, libraries or plugins in the same familiar pace, no need to continue digging up more info about what Yarn can do for you.
But if you're not too afraid to test and eventually embrace innovation and if you're constantly looking for breakthroughs that could help you get even more efficient in your work, well, then here's why should start using Facebook's Yarn today:
1. Catching Mode
Imagine this scenario: you're trying to install a package that you already installed once, in the past, and your internet connection goes down!
Here Yarn comes to your rescue: it practically catches the packages that it downloads and this features allows it to it handle previously installed packages without internet connection.
Could you have imagined this when you were using NMP?
2. Secure and Faster Installs
Security is vital when you're deploying lots of packages during the development process of a big web project!
Stay reassured: Yarn inspects every package's integrity for you, keeping your project protected from any corrupt package that you might need to install.
As for speed (and this is no "small" detail when you need to install lots and lots of JS packages), Yarn becomes a serious competition for NPM: depending on the packages' sizes it can turn an install into a matter of just a few seconds.
3. Registry Compatibility
Need to download a package from the NPM repository? Or maybe from Bower or other custom repo?
Yarn "spoils" you with registry compatibility. So, feel free to install and boost your web project with whatever JavaScript package you need!
4. Deterministic Install Algorithm
Bid farewell to machine specific bugs!
For Yarn uses lock files, which allows it to keep the same node_modules directories structure; it practically installs the same dependencies regardless of the types of development environments (that's right,Yarn allows you to install them across multiple machines) that you're installing your JavaScript packages in or of the order in which you install them.
Just imagine: same structure (node_modules directories) for all the "participants" in a large project; close to zero bugs that would otherwise replicate on multiple machines.
5. Improved Network Performance
On a scale of 1 to 5 how frustrated do you get when your package's installation fails more than 2 or 3 times in a row?
Good news: Yarn will make the whole process stress-free. How? It queues up, mitigates and constantly retries the failed requests, thus reducing the no. of installation failures.
Does This Mean We're Witnessing The End of NPM?
No, we're not, for one major reason: open-source projects don't work that way.
The whole community behind it (bringing together Facebook, Google, Exponent and Tilde engineers) see themselves as NPM contributors instead of "annihilators".
In a nutshell: Yarn is the proof of how a piece of code written so that it should address secific work scenarios better than the generally-used and proven “tool” can turn into a competitive new tool that other teams of developers can deploy, as well.
Note: there still are improvements to be made (but we're talking about Facebook here, so expect the team behind it to work hard to continuously perfect it) and making Yarn capable to help you handle private packages (its main limitation at the moment) is on top of the list!
How can get started with Yarn? Well, it's available on GitHub, under a BSD-2-clause license. Go get it, test it and share your thoughts in the comments bellow! We're more than curious what are your impressions about the new Yarn vs the conventional NPM "competition" (for developers' preferences) are. Happy Yarning!
Adrian Ababei / Dec 08'2016
Your very own digital assistant
Google offers two new services for its enterprise customers, the most notable being Google Springboard – your very own digital assistant especially designed for enterprise companies which use Google’s services for business purposes.
Springboard has been in testing with a small number of customers until now but it’s been finally released so you can enjoy more power at your fingertips.
Google Springboard features a single search interface which uses artificial intelligence to gather and sort information from Google’s other products such as Google Docs, Calendar, Gmail, Google Drive and more. Prabhakar Raghavan, VP of Engineering for Google Apps states „the average knowledge worker [currently] spends the equivalent of one full day a week searching for and gathering information.”
Apart from its improved search capabilities, Springboard also provides users with “useful and actionable information and recommendations” which they can use to solve tasks and assignments throughout their day.
Google Sites gets better as well
Google Sites also boasts a new design as well as a few interesting features. Google Sites is Google’s information portal used to house internal company information such as newsletters, reports and so on.
Google Sites users can now use the improved drag and drop interface for easier use and editing can be done in real time by different parties.
Google Sites also became friendlier towards different kinds of screen – now it can support any screen from a 30 inch monitor to a smart phone or laptop.
Conclusions
It will be interesting to see the users’ reaction to these new apps. It remains to be seen if Google’s Springboard can fully replace a personal assistant, but I guess we’ll see the answer to that in the future – Google plans to expand and improve Springboard with more useful features.
Adrian Ababei / Jun 14'2016
Microsoft scientists have demonstrated that by analyzing large samples of search engine queries they may in some cases be able to identify internet users who are suffering from pancreatic cancer, even before they have received a diagnosis of the disease. The scientists said they hoped their work could lead to early detection of cancer. “We asked ourselves, ‘If we heard the whispers of people online, would it provide strong evidence or a clue that something’s going on?’” Dr. Horvitz said. The researchers focused on searches conducted on Bing, Microsoft’s search engine, that indicated someone had been diagnosed with pancreatic cancer. From there, they worked backward, looking for earlier queries that could have shown that the Bing user was experiencing symptoms before the diagnosis. Those early searches, they believe, can be warning flags. While five-year survival rates for pancreatic cancer are extremely low, early detection of the disease can prolong life in a very small percentage of cases. The study suggests that early screening can increase the five-year survival rate of pancreatic patients to 5 to 7 percent, from just 3 percent. The researchers reported that they could identify from 5 to 15 percent of pancreatic cases with false positive rates of as low as one in 100,000. The researchers noted that false positives could lead to raised medical costs or create significant anxiety for people who later found out they were not sick. The data used by the researchers was anonymized, meaning it did not carry identifying markers like a user name, so the individuals conducting the searches could not be contacted. A logical next step would be to figure out what to do with that search information. One possibility would be some sort of health service where users could allow their searches to be collected, allowing scientists to monitor for questions that indicate warning flag symptoms. “The question, ‘What might we do? Might there be a Cortana for health some day?’” said Dr. Horvitz, in a reference to the company’s speech-oriented online personal assistant software service. Although the researchers declined to offer specific details, Dr. White is now the chief technology officer of health intelligence in a recently created Health & Wellness division at Microsoft. They acknowledged that health-related data generated from web search histories was still new territory for the medical profession. “I think the mainstream medical literature has been resistant to these kinds of studies and this kind of data,” Dr. Horvitz said. “We’re hoping that this stimulates quite a bit of interesting conversation.” The new research is based on the ability of the Microsoft team to accurately distinguish between web searches that are casual or based on anxiety and those that are genuine searches for specific medical symptoms by people who are experiencing them, he noted. Both a computer scientist and a medical doctor by training, Dr. Horvitz said he had been exploring this area in part because of a phone conversation with a close friend who had described symptoms. Based on their conversation, Dr. Horvitz advised him to contact his doctor. He received a diagnosis of pancreatic cancer and died several months later. The availability of vast sets of behavior data based on individual web queries using the search engines offered by companies like Google and Microsoft has for a number of years been seen as a potential indicator of health-related information. In 2009, Google published a research paper that explored the potential of early detection of flu epidemics based on statistical analysis of web search logs, though the results of that effort ultimately fell short of what had been hoped. More recently, Microsoft researchers have had significant success in finding early evidence of adverse drug reactions from patterns observed in web logs. In 2013, they detected unreported side effects of prescription drugs before they were found by the Food and Drug Administration’s warning system. The researchers are exploring evidence related to a range of devastating diseases. They also said that unlike the drug interaction data, which would be of direct value to the F.D.A. as an early alert, it was possible that symptom alert data might be made available as part of a broader online health service that a company like Microsoft might offer.
Source: http://www.nytimes.com
Adrian Ababei / Jun 10'2016
Card based design is growing more and more popular and now Google wants to get in on the action as well. Google wants to switch its mobile search results to a new design called „rich cards”. The new design is a direct successor to Google’s already popular rich snippets feature. But the makeover doesn’t stop there – Google’s planning to redesign desktop search results with a completely new layout.
Google Search Gets a Makeover
Rich snippets are search results composed from a preview of the page’s text as well as small pictures. Google doesn’t intend to replace rich snippets but only complement and build on them in order to improve user experience.
Rich cards will be displayed in a carousel format which is easy to navigate by simply swiping right or left. The carousel can show cards from different sites or the same site.
Webmasters are excited about Google’s makeover since it allows them to stand out in the search results and market their products more effectively. This new design based on rich cards can also improve organic traffic in some cases. Currently, Google is implementing the new layout for just two content categories: movies and recipes.
Content Categories Based on Visuals Will Experience The Change First
These two content categories are perfect for this change – the visual nature of these categories will increase organic traffic for websites. Food site owners can create rich previews of their website’s content by featuring appealing images for each dish or recipe. The same applies to movie sites with graphics and posters.
The main difference between the original snippets and Google’s upgraded rich card snippets is simply the number of images which webmasters can features. Rich snippets were released 6 years ago and could feature just one image in search results. Nowadays webmasters will be able to feature a series of images with the carousel system.
Before you go mobile to check out Google’s new layout keep in mind that right now only people using the English mobile version of Google can see the rich cards layout. The new layout will also experience multiple changes and improvements as Google is experimenting with new ways of providing richer previews in their search results and it’s only a matter of time before other types of content will benefit from rich card snippets.
Google Webmaster Tools Gets Upgraded
Google also offers integration with the Google Search Console, also known as Google Webmaster Tools – site owners will be able to see data related to their rich cards. This will help them monitor search performance more closely. If you want to check out how the rich cards work in Search just head on to Google’s Search Gallery and see screenshots of mark-up type samples and cards.
Another interesting change is Google’s Knowledge Graph – this is the system that collects information about people, things and places in order to understand how they are all connected. Knowledge Graph cards will be placed inline, effectively prioritizing them over competing website. This leads to a more cleaner and simplified look for Google’s search results.
The new desktop search design has practical features as well – now users have to scroll down to see more results – Knowledge Graph cards for locations can take up a lot of space.
Here is the list of changes for Desktop Search Results:
Wider tabs for News, Images and All tabs
Sub-links will show up under the main result, in a group with the same cards
Stories from the „in the news” list will appear in the same card
The „people also search for” list will show up at the bottom of the search results page and not in the sidebar
Google’s new experimental layout will surely help site owners get noticed much easier in mobile search results and receive more organic traffic. It’s likely that the carrousels will replace written text more and more and the movement towards rich, image-based snippets as opposed to simple text content is obvious.
Adrian Ababei / Jun 09'2016
Back in the day projects featuring crazy sound effects, animations and interactions were all the rage. These effects created intense user experiences hence is why they became so popular – most of these projects were built using Adobe Flash.
Flash is close to death and the era of rich multimedia platforms has come to an end but there’s good news – a fresher successor will replace Flash. Three.js and WebGL technologies are growing very fast, allowing developers to create projects similar to those built in Flash but without any security issues. The Three.js and WebGL combo is one of the most powerful tools you can use to create immersive UX.
WebGL and Three.js
WebGL is the foundation that provides developers with ways to manipulate interactive 2D and 3D graphic elements. It allows users to mix elements with HTML and combine them with other constituents of the background or page.
On the other hand, Three.js is a Javascript library with a long list of features which allow developers to operate with geometry, lights, cameras, scenes and more. Three.js helps unlock WebGL’s true potential by adding extra functionality options. With these two in place, it’s very easy to create 3D animations accelerated through GPU without needing any browser plugins.
Compatibility issues
When different technologies get combined, dilemmas appear – should you create a “one size fits all” project that can run on different devices and offer consistent experience or risk it all and impress the audience you can reach. When working with Three.js and WebGL it’s the same. Most mobile browsers can be a real hassle especially since many users are stuck with legacy browsers – full compatibility can be tricky to achieve. The good news is that support is growing and the technologies are developing fast – as long as you don’t use Three.js and WebGL for any critical part of your project, you should be fine.
Adrian Ababei / Jun 06'2016
Eye tracking technology has been in the research phase for quite a while now but the good news is that this new software opens the door to it for anyone with a website. Just about any website owner can use Webgazer to optimize their content and graphics.
WebGazer – where it all began
WebGazer.js was developed by the scientists at Brown University – it’s very easy to implement and can be added to any site in just a couple of minutes with a few lines of code. The software runs on the website visitor’s browser, effectively turning the webcam into an eye tracker which can see where the visitor is looking on the page. The idea behind this is to help developers make websites more user friendly by optimizing content.
Once the software is embedded onto a website, WebGazer will ask users for permission to access their webcams – once permission is given, WebGazer will use face detection software to locate the user’s eyes and face. The program will then convert the image to black and white in order to clearly distinguish the user’s eyes and iris. Once the iris is located, the system uses a statistical model which is calibrated via the user’s cursor movements and clicks. This model works by assuming that a visitor looks at the spot where they just clicked and each click tells the model where the eye looks when it’s viewing a part of the page. Reasonable calibration is achieved in around three clicks and after that WebGazer can accurately guess the viewer’s gaze in real time.
Alexandra Papoutsaki, a graduate student from Brown University states: “We see this as a democratization of eye-tracking. Anyone can add WebGazer to their site and get a much richer set of analytics compared to just tracking clicks or cursor movements.”
Privacy and experiments
There’s no need to worry about privacy when using WebGazer as no video is shared through the software – only the user’s gaze is reported back to the website. Alexandra P. performed a few experiments in order to properly test and evaluate the system – results show that it can infer gaze location in 100-200 screen pixels. While this may not be as accurate as commercial eye tracking software, it’s still a good estimation of where your users are looking.
WebGazer could help developers optimize their pages, create more eye catching content or plan their prices space accordingly. Not only that but in the future we might see WebGazer being used for accessibility reasons or eye controlled gaming. WebGazer’s code is currently available for free use by anyone interested.
It will be fascinating to see how WebGazer will evolve and change the way we view the web.
Adrian Ababei / Jun 03'2016
Google recently launched a new tool which aims to help business owners determine their website speed and mobile friendliness on tablets and smartphones.Mobile searches recently surpassed desktop searches and since more and more people surf the internet through mobile devices it’s critical for webmasters to check if their website is performant, functional, accessible and mobile friendly. Google’s New ToolGoogle’s new website testing tool is very simple and user friendly – you don’t have to be a technical person to try it out. Just type in your website’s address and the tool will analyse your site, scoring it according to certain requirements. The tool offers more detailed reports as well as suggestions on how to fix things – you can then use this information yourself or pass it along to your webmaster.Google offers plenty of testing tools for sites, including the Mobile Friendly Test, PageSpeed Insights and PageSpeed Tools but most of these tools are aimed at users with some technical knowledge – the new testing tool is aimed at business owners and non-technical users simply through its ease of use. Faster resultsThe tool shows scores in green for good, yellow for fair and red for poor. The user interface is greatly simplified as well. That being said, the new tool is powered by PageSpeed Insights – the idea is to get a fast overview of your website’s speed, mobile friendliness and performance at a glance.Google has increased its effort on mobile web where it created new technologies such as Accelerated Mobile Pages or AMP – these pages load much faster than web pages and use much less data. Google’s search algorithm has also been updated and having a mobile friendly website is more important than ever. More and more users shift to mobile devices and Google is paving the way to a more pleasurable user experience for all parties involved.
Adrian Ababei / Jun 02'2016
Fog Creek Software is a New York based company best known for Trello and Stack Overflow. They recently announced the release of HyperDev, an online playground used for developing and deploying web apps. The open beta service is currently available to anyone willing to try it out.
HyperDev is in Open Beta
Previously users had to ask Fog Creek for permission to access HyperDev’s private beta. HyperDev is interesting because it can handle many of the steps necessary to get a Web app live and update it. Simply go on to HyperDev’s website and you can get your app live and complete with a proper URL as well as an environment for editing server and client side code. You can also invite other people to work on the code with you and if your project is worth implementing, you can save the code to your GitHub account.
Hyperdev automatically makes all changes to your app – there is no “deploy” button. You can see any code your team members are adding live just like in Google Docs. If a user is looking at the app through the URL, they will see it change live without needing to refresh.
The Google Docs of App Development
Fog Creek co-founder Joel Spolsky states “Literally as you type each keystroke, it can be rebooting, the whole server gets deployed,” - “We hope to get it down to like 100 milliseconds, ultimately.”
Keep in mind that HyperDev is not a full flexible cloud infrastructure or a standalone platform as a service or PaaS. This means that it won’t be the ideal hosting for every application but it will be ideal if you want to try small bits of code to see if they work properly.
HyperDev is currently free for publically visible projects. In time the service will most likely offer a service to keep projects private for a fee, just like GitHub.
JSFiddle is a service very similar to HyperDev – it allows users to edit and deploy code. Other similar services also include Stack Snippet. But neither of these services allow users to run live websites.
HyperDev only works with JavaScript in its current build. Python support as well as other languages will be added in the future.
Fog Creek co-founder Joel Spolsky is a software development wizard but he’s not above googling for bits and pieces of code. Recently he built a podcast feed during a 5 hour plane trip from New York to San Francisco – the project was built in HyperDev. The for-loop portion in the app “was the most cut-and-pastey code I had ever done in my life,” Spolsky said. HyperDev is perfect for this type of quick programming.
Adrian Ababei / May 30'2016