The small JavaScript Loud Links adds sounds to your website by making links and other elements audible via HTML5 audio elements that will provide audible feedback on click or hover. All you need for that are sound files as MP3 and OGG. The solution works on all common browsers.
Sounds and Websites: A Question of Taste
Of course, of course. You don’t need to say it. Sound on a website is so 90s and it was annoying back then already. I know this opinion and it can be justified as well. However, using sounds can be also justified on many websites. Here at Noupe, we’ve just recently dealt with the topic in a more general way.
Loud Links is a small JavaScript from the digital pen of the Rotterdam-based designer and UX developer Mahdi Al-Farra. Mahdi starts something he calls weekend projects on a regular basis, and Loud Links is one of the thoroughly interesting results of these rush jobs.
To say it right away, Loud Links doesn’t want to flood your UI with music. It has only been created to set sounds for interactions. Precisely said, Loud Links can only add sound to two different states. While you can generally apply Loud Links to any element on your website, the sounds will only resound while clicking or hovering over an element with the mouse.
The JavaScript library creates an HTML5 audio for the respective marked element, and uses MP3/OGG files to play the respective sound. If you own fitting sound snippets, using Loud Links is very easy. A plethora of snippets can be found in the depths of the web.
Loud Links: How to
If you want to use Loud Links, you need to create a folder named sounds in your website’s root directory. Within this folder, create two more folders named mp3 and ogg.
After integrating the JavaScript into your HTML document the usual way, mark the links of other elements that you want to add sound to with the class loud-link-hover or loud-link-click. Using the HTML5 data attribute, you can add the specific sound without entering the file extension. This means, instead of sound.mp3, you only need to enter sound.
That’s it. From now on, your website will give audible feedback on the interactions.
Loud Links is available for free download on Github. Unfortunately, Mahdi didn’t specify a license yet, so I can not say whether you can use Loud Links for commercial purposes or not. However, I would be surprised if it wasn’t the case. Just to be safe, ask Mahdi before you use it commercially.
(dpe)
* You might also be interested in the following articles
Every week we feature a set of comics created exclusively for WDD.
The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.
These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.
So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.
Feel free to leave your comments and suggestions below as well as any related stories of your own…
Older than dirt
Plenty of fresh air
It helps me concentrate
Can you relate to these situations? Please share your funny stories and comments below…
Bluehost have recently open sourced their in-house script that can be used to automatically update WordPress websites.
Sometime back, Bluehost had noticed that majority of support requests and issues related to hacked websites arose from WordPress users who were running obsolete versions of WordPress.
As such, Bluehost came up with an ambitious yet effective plan: their wrote a script that would automatically check for outdated versions of WordPress on Bluehost’s servers, and update them accordingly. The script, coded in Perl and working via WP CLI, would first take a backup of the website, then update WordPress and restore data, and finally perform a check to see if everything is working normal. If not, it would restore the backup.
After successful implementation, Bluehost noticed that support requests dropped by 18%. In fact, this method of Bluehost received praise from Matt Mullenweg himself in his State of the Word 2015 address last year in December.
Now, you can play with that script too — Bluehost have released it as open source on GitHub, and you can grab it for your projects or other ventures.
Having been used to update millions of WordPress websites, this particular script has a great success rate and is therefore, really useful for anyone looking for such a piece of code to run automated updates.
If you have a website for your company or are trying to promote your personal brand through social media, odds are you know a couple things about the Internet. One, you’re probably aware that a lot of people use the internet, to the tune of 168 million DVDs’ worth of information exchanged online on a daily basis. So, yeah. A lot of people are online every day. Two, you probably have a good sense of just how much business is done over the Internet every day.
In case you weren’t totally sure about the numbers, it’s about $2.5 million in ecommerce every minute. Mind-boggling numbers, I know. But here’s the point: if you are using the Internet to promote a business or brand—if you’re not, you should be—then you know the importance of having a good-looking, attention-grabbing website.
Because so many people are online all the time nowadays, it’s often the case that your website is a potential customer’s first impression of you. And you know what they say about first impressions. They’re important. Very important.
Intimidation
Of course, if you know just how massive the Internet really is, it’s quite possible you’re also quite intimidated. You might be asking yourself, “How can I possibly make a splash in a world that is overflowing with new information every day?” It’s a good question to ask, but don’t worry, you don’t need to be intimidated. All you have to do is make sure your website or app looks great and functions smoothly. That’s the first step in establishing a dominant online presence.
Now you’re thinking, “Okay, sure. Seems simple enough, except for one thing: I don’t know anything about web design. I’m just trying to run my business!”
If you are thinking this, that’s okay. First of all, you’re not alone, not by any means. Second of all, don’t worry if you don’t know the first thing about web design! There are professionals for that sort of thing! Indeed, the world of freelance digital design has really taken off in recent years, as more and more people begin to recognize the paramount importance of their online presence.
Before you get too relieved and rush out to hire the first digital designer you meet, you should know that the process of digital design is a very complex one, involving many steps. It’s equal parts art and science, and because the website is such an important part of your company’s image, there are tons of little details that go into the creation of a great product. Here’s a few things you should know about digital design before you dive in:
First, you should know that generally speaking, the process has four steps: User Experience (UX) Design, User Interface (UI) design, Visual Design, and Interaction Design. Typically, good digital designers will specialize in just one or a couple of those categories, and the process always goes in that order. Think of it like building a house. You need to have the blueprints first.
That part comes in the UX phase of the design process. Then you need to lay down the foundation and the framework of the house. That’s where UI comes in. After the walls and roof and windows are built, you need to make sure the house actually looks good. That part is taken care of in the Visual Design phase. Then, after all that is done, you make one final sweep of the house to make sure everything works and the layout flows nicely from room to room. That’s where Interaction Design comes into play.
Obviously, all four of these steps are crucial to building a high quality website, but if there’s one you should make sure you absolutely don’t skimp on, it’s Interaction Design. Think about it: your house can look gorgeous and attention-grabbing and have all sorts of bells and whistles, but if you’ve got a staircase that leads to nowhere, you’re in trouble, and that’ll be the one thing everyone says about your house, despite all the pretty decorations. Don’t believe me?
Ask TurboTax or Amtrak, companies that, despite offering very solid, useful products and services, consistently get lambasted for having infuriating websites. Trust me, you’d much rather be winning awards for great Interaction Design than dealing with the many customer service calls that companies with crappy websites probably field every day. Looking good is very important, but if your website falls short in functionality, you’ll get left behind.
Quality
So, you’re fully convinced that you need to get out there and hire a top quality freelance Interaction Designer. Good call. But, now you might be thinking to yourself, “How can I tell the difference between a really good Interaction designer and an impostor? It seems like digital design is such a subjective field anyway.”
Well, you’re right. Digital design is a very subjective, art-oriented field, but that doesn’t mean you can’t tell the difference between a good designer and a bad one. As part of the rollout of their elite freelance designer network, my own favorite hiring platform Toptal (used it many times for my company 1WD) has been publishing a number of hiring guides that include ways to determine how you can properly vet all sorts of designers, including Interaction Design candidates.
Among the many pointers and sample interview questions you should keep in mind when vetting freelance design candidates, this hiring guide also points out a couple key features that you should definitely pay attention to in your search. The first one is an understanding of the psychology of a user. Good Interaction designers will know that many users go to sites for a number of different reasons, and they will tailor their creative process to that particular end—user motivation.
Because Interaction is the last step in the process before you present your site to the world, you want to make sure your Interaction designer has a very firm grasp on the many psychological principles that underscore our internet usage, including Goal-Oriented Design, Personas, Cognitive Dimensions, User Scenarios, and Learnability and Usability, among others.
Additionally, because digital design is such a subjective process, it’s absolutely crucial that your designer be a good communicator in order to make sure there is a clear understanding of your vision for the website. This process requires constant back and forth, and if your designer isn’t great at keeping in touch, you might end up with a very different final product than you envisioned.
So now you’re ready to take the world by storm with your brand new, beautifully elegant and smoothly-functioning website. All you need is the help of a good freelance digital designer. Be sure to keep these tips in mind, and don’t skimp on Interaction just because you can see the finish line. Happy hiring!
The following is a guest post by Damon Bauer. There has been a growing sentiment (for instance) that using node packages directly, with the command line interfaces they provide, is a good route to take. As opposed to abstracting the functionality away behind a task runner. Partly: you use npm anyway, npm provides scripting functionality, why not just use that? But there is more to it than that. Damon will walk us through the thinking, but also exactly how to accomplish many of the most important tasks in a front end development build process.
I’ve started using npm scripts in my projects for about the last six months. Before that, I used Gulp and before that, Grunt. They’ve served me well and helped me perform my work faster and more efficiently by automating many of the things I used to do by hand. However, I started to feel that I was fighting the tools rather than focusing on my own code.
Grunt, Gulp, Broccoli, Brunch and the like all require you to fit your tasks into their paradigms and configurations. Each has it’s own syntaxes, quirks and gotchas that you need to learn. This adds code complexity, build complexity and makes you focus on fixing tooling rather than writing code.
These build tools rely on plugins that wrap a core command line tool. This creates another layer of abstraction away from the core tool, which means more potential for bad things to happen.
Here are three problems I’ve seen multiple times:
If a plugin doesn’t exist for the command line tool you want to use, you’re out of luck (unless you write it).
A plugin you’re trying to use wraps an older version of the tool you want to use. Features and documentation don’t always match between the plugin you’re using and the current version of the core tool.
Errors aren’t always handled well. If a plugin fails, it might not pass along the error from the core tool, resulting in frustration and not really knowing how to debug the problem.
But, bear in mind…
Let me say this: if you are happy with your current build system and it accomplishes all that you need it to do, you can keep using it! Just because npm scripts are becoming more popular doesn’t mean you should to jump ship. Keep focusing on writing your code instead of learning more tooling. If you start to get the feeling that you’re fighting with your tools, that’s when I’d suggest considering npm scripts.
If you’ve decided you want to investigate or start using npm scripts, keep reading! You’ll find plenty of example tasks in the rest of this post. Also, I’ve created npm-build-boilerplate with all of these tasks that you can use as a starting point. Let’s get to it!
Writing npm scripts
We’ll be spending a majority of our time in a `package.json` file. This is where all of our dependencies and scripts will live. Here’s a stripped down version from my boilerplate project:
We’ll build up our `package.json` file as we go along. Our scripts will go into the scripts object, and any tools we want to use will be installed and put into the devDependencies object.
Before we begin, here’s a sample structure of the project I’ll be referring to throughout this post:
Compile SCSS to CSS
I’m a heavy user of SCSS, so that’s what I’ll be working with. To compile SCSS to CSS, I turn to node-sass. First, we need to install node-sass; do this by running the following in your command line:
npm install --save-dev node-sass
This will install node-sass in your current directory and add it to the devDependencies object in your `package.json`. This is especially useful when someone else runs your project because they will have everything they need to get the project running. Once installed, we can use it on the command line:
Let’s break down what this command does. Starting at the end, it says: look in the `src/scss` folder for any SCSS files; output (-o flag) the compiled CSS to `dist/css`; compress the output (using the --output-style flag with “compressed” as the option).
Now that we’ve got that working the the command line, let’s move it to an npm script. In your `package.json` scripts object, add it like so:
You will see the same output as running the node-sass command directly in the command line.
Any time we create an npm script in the remainder of this post, you can run it by using a command like the above.
Just replace scss with the name of the task you want to run.
As you will see, many of the command line tools we’ll use have numerous options you can use to configure it exactly you see fit. For instance, here’s the list of (node-sass options). Here’s a different setup show how to pass multiple options:
Now that we’re compiling Scss to CSS, we can automatically add vendor prefixes using Autoprefixer & PostCSS. We can install multiple modules at the same time, separating them with spaces:
npm install --save-dev postcss-cli autoprefixer
We’re installing two modules because PostCSS doesn’t do anything by default. It relies on other plugins like Autoprefixer to manipulate the CSS you give it.
With the necessary tools installed and saved to devDependencies, add a new task in your scripts object:
This task says: Hey postcss, use (-u flag) autoprefixer to replace (-r flag) any `.css` files in `dist/css` with vendor prefixed code. That’s it! Need to change the default browser support for autoprefixer? It’s easy to add to the script:
Again, there’s lot of options you can use to configure your own build: postcss-cli and autoprefixer.
Linting JavaScript
Keeping a standard format and style when authoring code is important to keep errors to a minimum and increase developer efficiency. “Linting” helps us do that automatically, so let’s add JavaScript linting by using eslint.
Once again, install the package; this time, let’s use a shortcut:
npm i -D eslint
This is the same as:
npm install --save-dev eslint
Once installed, we’ll set up some basic rules to run our code against using eslint. Run the following to start a wizard:
eslint --init
I’d suggest choosing “Answer questions about your style” and answering the questions it asks. This will generate a new file in the root of your project that eslint will check your code against.
Now, let’s add a lint task to our `package.json` scripts object:
"scripts": {
...
"lint": "eslint src/js"
}
Our lint task is 13 characters long! It looks for any JavaScript files in the src/js folder and runs them against the configuration it generated earlier. Of course, you can get crazy with the options.
Uglifying JavaScript files
Let’s work on combining and minifying our JavaScript files, which we can use uglify-js to do. We’ll need to install uglify-js first:
npm i -D uglify-js
Then, we can set up our uglify task in `package.json`:
One of the great things about npm scripts is that they are essentially an alias for a command line task that you want to run over and over. This means that you can use standard command line code right in your script! This task uses two standard command line features, mkdir and &&.
The first half of this task, mkdir -p dist/js says: Create a folder structure (mkdir), but only if it doesn’t exist already (-p flag). Once that completes successfully, run the uglifyjs command. The && lets you chain multiple commands together, running each one sequentially if the previous command completes successfully.
The second half of this task tells uglifyjs to start with all of the JS files (`*.js`) in `src/js/`, apply the “mangle” command (-m flag), and output the result to `dist/js/app.js`. Once again, check the documentation for the tool in question for a full list of options.
Let’s update our uglify task to create a compressed version of `dist/js/app.js`. Chain another uglifyjs command and passing the “compress” (-c) flag:
Let’s now turn our attention to compressing images. According to httparchive.org, the average page weight of the top 1000 URLs on the internet is 1.9mb, with images accounting for 1.1mb of that total. One of the best things you can do to increase page speed is reduce the size of your images.
Imagemin is great because it will compress most types of images, including GIF, JPG, PNG and SVG. You can pass it a folder of images and it will crunch all of them, like so:
This task tells imagemin to find and compress all images in `src/images` and put them in `dist/images`. The -p flag is passed to create “progressive” images when possible. Check the documentation for all available options.
SVG Sprites
The buzz surrounding SVG has increased in the last few years, and for good reason. They are crisp on all devices, editable with CSS, and screen reader friendly. However, SVG editing software usually leaves extraneous and unnecessary code. Luckily, svgo can help by removing all of that (we’ll install it below).
You can also automate the process of combining and spriting your SVGs to make a single SVG file (more on that technique here). To automate this process, we can install svg-sprite-generator.
npm i -D svgo svg-sprite-generator
The pattern is probably familiar to you now: once installed, add a task in your `package.json` scripts object:
Notice the icons task does three things, based on the presence of two && directives. First, we use svgo, passing a folder (-f flag) of SVGs; this will compress all SVGs inside the folder. Second, we’ll make the dist/images folder if it doesn’t already exist (using the mkdir -p command). Finally, we use svg-sprite-generator, passing it a folder of SVGs (-d flag) and a path where we want the SVG sprite to output (-o flag).
Serve and Automatically Inject Changes with BrowserSync
One of the last pieces to the puzzle is BrowserSync. A few of the things it can do: start a local server, automatically inject updated files into any connected browser, and sync clicks & scrolls between browsers. Install it and add a task:
Our BrowserSync task starts a server (--server flag) using the current path as the root by default. The --files flag tells BrowserSync to watch any CSS or JS file in the `dist` folder; whenever something in there changes, automatically inject the changed file(s) into the page.
You can open multiple browsers (even on different devices) and they will all get updated file changes in real time!
Grouping tasks
With all of the tasks from above, we’re able to:
Compile SCSS to CSS and automatically add vendor prefixes
Lint and uglify JavaScript
Compress images
Convert a folder of SVGs to a single SVG sprite
Start a local server and automatically inject changes into any browser connected to the server
Let’s not stop there!
Combining CSS tasks
Let’s add a task that combines the two CSS related tasks (preprocessing Sass and running Autoprefixer), so we don’t have to run each one separately:
"scripts": {
...
"build:css": "npm run scss && npm run autoprefixer"
}
When you run npm run build:css, it will tell the command line to run npm run scss; when it completes successfully, it will then (&&) run npm run autoprefixer.
Just like with our build:css task, we can chain our JavaScript tasks together to make it easier to run:
Combining JavaScript tasks
"scripts": {
...
"build:js": "npm run lint && npm run uglify"
}
Now, we can call npm run build:js to lint, concatenate and uglify our JavaScript in one step!
Combine remaining tasks
We can do the same thing for our image tasks, as well as a task that combines all build tasks into one:
"scripts": {
...
"build:images": "npm run imagemin && npm run icons",
"build:all": "npm run build:css && npm run build:js && npm run build:images",
}
Watching for changes
Up until this point, our tasks require to make changes to a file, switch back to the command line and run the corresponding task(s). One of the most useful things we can do is add tasks that watch for changes that run tasks automatically when files change. To do this, I recommend using onchange. Install as usual:
npm i -D onchange
Let’s set up watch tasks for CSS and JavaScript:
"scripts": {
...
"watch:css": "onchange 'src/scss/*.scss' -- npm run build:css",
"watch:js": "onchange 'src/js/*.js' -- npm run build:js",
}
Here’s the breakdown on these tasks: onchange expects you to pass a path as a string to the files you want to watch. We’ll pass our source SCSS and JS files to watch. The command we want to run comes after the --, and it will run any time a file in the path given is added, changed or deleted.
Let’s add one more watch command to finish off our npm scripts build process.
"scripts": {
...
"watch:all": "parallelshell 'npm run serve' 'npm run watch:css' 'npm run watch:js'"
}
parallelshell takes multiple strings, which we’ll pass multiple npm run tasks to run.
Why use parallelshell to combine multiple tasks instead of using && like in previous tasks? At first, I tried this. The problem is that && chains commands together and waits for each command to finish successfully before starting the next. However, since we are running watch commands, they never finish! We’d be stuck in an endless loop.
Therefore, using parallelshell enables us to run multiple watch commands simultaneously.
This task fires up a server with BrowserSync using the npm run serve task. Then, it starts our watch commands for both CSS and JavaScript files. Any time a CSS or JavaScript file changes, the watch task performs a respective build task; since BrowserSync is set up to watch for changes in the `dist` folder, it automatically injects new files into any browser connected to it’s URL. Sweet!
Other useful tasks
npm comes with lots of baked in tasks that you can hook into. Let’s write one more task leveraging one of these built scripts.
"scripts": {
...
"postinstall": "npm run watch:all"
}
postinstall runs immediately after you run npm install in your command line. This is a nice-to-have especially when working on teams; when someone clones your project and runs npm install, our watch:all tasks starts immediately. They’ll automatically have a server started, a browser window opened and files being watched for changes.
Wrap Up
Whew! We made it! I hope you’ve been able to learn a few things about using npm scripts as a build process and the command line in general.
Just in case you missed it, I’ve created an npm-build-boilerplate project with all of these tasks that you can use as a starting point. If you have questions or comments, please tweet at me or leave a comment below. I’d be glad to help where I can!
I often think about our responsibility as web developers. I compare our job to a health worker, to a craftsman, and I realize that we have a pretty easy job in most cases. Usually, nobody’s life will be affected if a website is not available for a couple of minutes or hours.
But there are some cases where this could happen. People start coding app interfaces for health application with web technologies, people start connecting health services to the web, and people also rely on websites for their own safety. And that’s why I think we should feel responsible for our users. And by making choices that are ethical and user-centered, we create a better web for everyone.
In a study conducted by Geoff Kenyon way back in 2011, he determined these standards for comparing your website speed against the rest of the Web:
if your site loads in 5 seconds it is faster than approximately 25% of the web;
if your site loads in 2.9 seconds it is faster than approximately 50% of the web;
if your site loads in 1.7 seconds it is faster than approximately 75% of the web;
if your site loads in 0.8 seconds it is faster than approximately 94% of the web.
Five years later you can bet these numbers are conservative in the extreme!
Most of the time, priorities are set on different aspects of digital marketing such as social media marketing, search engine optimization, and content marketing. Of course, what’s left out of the equation is page speed optimization. You may have a great website with good content and superb functionality, but how’s the quality of your traffic going? Milliseconds do matter in optimizing your website.
Have you asked yourself, “I do have a lot of visitors, but why aren’t they converting?”
Minimum speed
The golden question is: how fast should my website load in 2016?
In Google’s Site Performance for Webmasters video, Maile Ohye, states that “2 seconds is the threshold for e-commerce website acceptability. At Google, we aim for under a half second.”
A half second (0.5 seconds) is equal to 500 milliseconds (ms), the literal blink of an eye is 300 to 400 ms.
The answer to our question is: from 500 milliseconds to 2 seconds at most.
Website speed checker tool called Pingdom has collated statistics of websites that have used their tool in the past year:
Average load time: 5 seconds;
Average page size: 3Mb;
Average number of images: 42;
Average number of JavaScripts: 21;
Average number of http requests: 89.
What these stats show is that most sites on the Web (or at least most sites that checked out Pingdom’s service) are not yet fully optimized for site speed. Most of these sites were too slow five years ago, in 2016 they’re more than 250% too slow.
Remember, Amazon has discovered that for every one second delay, conversions dropped by 7%. If you sell $100k per day, that’s an annual loss of $2.5m. Walmart has found that it gains 1% revenue increase for every 100ms of improvement.
These giants have upped their game by just optimizing their websites for speed. It’s not just their products, nor their brand authority ? by being considerate of people’s dwindling patience, they have made their customers happy with a good, fast website.
Reality bites
There are a number of simple tactics you can adopt to improve the speed of your site:
Select a good hosting deal
Opting for cheap hosting services will yield you cheap results. You simply get what you pay for. Choosing a good hosting company will make the difference; you can get better support, better speed, and better space to meet your site’s demands. This 2016, you can find hundreds of website hosting companies offering a good service, but there are only a few that truly provide what your individual site needs. Consider searching for a web hosting company that has been tested by many; you will find numerous web hosting reviews and complaints that can guide you. Don’t just jump on the bandwagon and choose the first site you see advertised.
Value UX
In creating a website, don’t be satisfied with applying touches that appeal to your taste. A webpage loads different elements at different times during the fetching-catching phase. If your business calls for more visual imagery than text, value user experience by optimizing your images to appropriate sizes, categorizing them into sections so loading the page will be easier. It’s been said that keeping it simple will be enough, but simplicity depends on what you’re trying to provide for the audience. Web designers are expected to work hand in hand with developers and the client; with good, clear communication, optimization won’t take long if it’s one of the priorities in building or rebranding a website. Use this opportunity to get ideas on how users interact with your website, and analyze their actions accordingly?figure out how to incorporate your analysis into your design.
Save every millisecond you can
There are numerous ways in increasing your site speed. For example, large websites may benefit from using a CDN (Content Delivery Network) for speed improvements. Here’s a quick guide from Web Designer Depot for optimizing your site for speed.
Study and understand these concepts
For designers and developers, understanding this concept aside from SEO is also important. It’s as important as maintaining user interface and user experience alike. Use Google Page Insights to check your site. If you’re not experienced in dealing with code, consult a web developer who can assist you in optimizing your site.
Recommended tools
I personally recommend these tools; it’s not an exhaustive list but these get the job done:
Google Page Insights: Google’s personal tool in checking page speed performance. It has a score range that checks your website’s compliance, whether mobile or desktop view.
Pingdom: perhaps the classiest tool among the list. Your site is counter-checked against all websites they have tested.
GTmetrix: gives you actionable insights on how to optimize your page speed.
WebPageTest: enables testing on various platforms using realistic data.
If you’re designing a website this year, it’s likely your client will require a portion that’s dedicated to content marketing. Blogs, photo slideshows, video streaming, infographic presentations, podcasts, and more are taking over digital marketing strategies, as 2015 reports by the Content Marketing Institute found 37 percent of B2C marketers have a documented content marketing strategy, while 35 percent of B2B marketers have a documented content marketing strategy. Both percentages are significantly increased from the previous year, and these numbers don’t include marketers who use some form of content marketing but have no documented strategy.
After your client has determined the best content marketing agency fit by evaluating them based on these content marketing questions, it’s up to you as a Web designer to make sure their efforts towards creating valuable content are rewarded with increased page views, more referrals, and better search engine optimization for keywords your client wants to rank for. Here are five Web design principles to keep in mind when supporting a website with content marketing goals.
1. Employ Responsive Design
In 2014, more than a third of smartphone owners used their mobile devices to go online more than desktop or laptop computers, according to research by Pew Research Center. More than 40 percent of Web traffic comes from mobile devices, CIO reports, making it imperative to make sure Web content is optimized for desktop, laptop, tablet, and mobile devices. Otherwise, pinching and zooming causes users to get frustrated, resulting in abandoning the site, reduced time spent on page, and less direct traffic.
Responsive design also affects the client’s search engine reach, as Google announced in 2015 that mobile-friendliness in design will positively affect the search algorithm. Because of the variety of device sizes people might use to access content, using a “fluid grid” in Web design is beneficial because it allows the design elements to resize in relation to other elements depending on the device they’re seen on.
2. Integrate Social Sharing Buttons
One of the best ways for useful content to spread is via social media channels. Free social networks give your client marketing muscle through powerful word of mouth. Make sure it’s easy for Web visitors to instantly share content on a website by displaying social media sharing buttons.
Before slapping on 15 different social media icons on each post, discuss with your client what social networks their target audience uses, or where they’d ideally want their content shared. Simplicity rules in Web design, so if they just want to focus on Facebook and Twitter, those two icons will be the only ones you’ll need to feature on each piece of content. B2B enterprises might want LinkedIn prominently featured, while feminine beauty or shopping sites will probably want their content consumers to be able to quickly add their content to Pinterest.
3. Add Dynamic Commenting Capabilities
Commenting systems are an essential part of content marketing posts for many reasons:
They keep people on the page. As visitors scroll through comments and engage in discussions, search engines are noticing the high time spent on page and positively reward sites whose readers stay engaged with better results.
They keep commenters coming back. If someone comments, and they receive a response from another reader or viewer or, better yet, the writer or moderator, they’ll be more likely to return to keep discussing or to see how other people respond.
They strengthen the community. Featuring a commenting system makes content consumers feel like they’re a part of the content, since they get to share their valuable opinions with other consumers. Comments become an interesting extension of the article and can often produce the most engaging material, prompted by the initial post.
Some commenting systems allow users to instantly show their Facebook profile picture next to their comment when they log in through Facebook. Others will email commenters when someone responds to their comment, giving them a link to click to so they can read and respond — instantly increasing page views. Yet others will allow the commenter to share their comment on their own website or on a social networking channel. Content marketing calendar Coschedule breaks down the pros and cons of eight popular commenting platforms in this post.
4. Make It Easy to Convert Content Consumers Into Customers
Content marketing gets more reach when consumers can easily get in touch with the writer/creator and brand to learn more — and purchase from the brand. Just like consumers look to social media in hopes of getting instant customer support, Web users demand instant access to content creators, who can be a direct link to sales for the brand the content supports. Additionally, relevant advertisements around the content make it even more valuable.
Converting content consumers into customers can be achieved in a variety of ways. First, design an author bio box, where authors can tell readers/viewers about themselves and what makes them a subject matter expert, and allows them to easily link to an email for people to get in touch with them. Create widgets that display related products that are relevant to the content on the bottom of the post. Include unobtrusive ad banners that are focused on helpful products that directly relate to the content, but make sure the design ensures the content is always the star.
5. Incorporate a Search Engine Optimization Plug-In
If you’re working with a client who doesn’t have an SEO budget or is new to content marketing, adding an SEO plug-in to the content marketing platform makes it easy for the business to optimize their content for search engines. More than half of average Google traffic share goes to the top three search results, reported online advertising network Chitika in 2013, which is why optimizing content for search engines is a vital consideration.
An SEO plug-in can help content creators ensure their headlines, meta-descriptions, H1 tags, and image tags are optimized for search engines. Crawlable link structures, URL structures, rich snippets, and indexable content all also play an important role in affecting how search engines view website designs. Set your client up for success by making these features that are conducive to effective content marketing a part of your Web design strategy.
(dpe)
* You might also be interested in the following articles
Sometime back, Google had announced that it will no longer allow users to upload ads built in Flash to AdWords. Carrying on with that policy, Google has now announced that starting 2017, it will stop running Flash ads altogether.
Starting June 30th, 2016, display ads built in Flash can no longer be uploaded into AdWords and DoubleClick Digital Marketing.
Starting January 2nd, 2017, display ads in the Flash format can no longer run on the Google Display Network or through DoubleClick.
This news is yet another step towards the demise of Adobe Flash, with the internet clearly steering away from Flash content now. In fact, Adobe has even renamed Flash Professional as Animate CC, and is focusing more on HTML5 content as opposed to Flash.
Considering the fact that Flash is a frequent target for security exploits on the internet, its falling out of favor does not come as a surprise to anyone. Google has long offered HTML5 ad creation tools, and the default video player on popular services such as YouTube too has been using HTML5 since 2015.
However, many advertisers have persisted with Flash, and a good part of the advertising industry still uses Flash to serve display ads. Now that Google has decided to put an end to this practice, we can expect results soon enough — with its dominant share of the web browser and internet search market, Google is probably the best company that is currently capable of influencing advertiser behavior on the internet.
As such, starting 2017, display ads in Flash will no longer be supported by Google. Note that, however, video ads built in Flash will continue to be supported for the time-being.
If you are using Flash ads, you can learn more about transitioning to HTML5 ads here.
* You might also be interested in the following articles
ECommerce is not as difficult as you might think it is, but there are a few things you should know before you launch your store and publish your first product.
Paperwork is still required
Even if your store is intangible, you have to pay taxes anyway. Take care of the paperwork first, and make sure you are ready to do it regularly. Otherwise, hire a trained person for this task, or ask your spouse do the job (remember that ‘in sorrow as in joy’ oath?).
Your store should look professional
Most customers are not very picky, so having a stellar-looking design is not a ‘must’. What *is* a ‘must’ is to deliver great user experience. Many world-renowned eCommerce giants haven’t updated their store designs for years, but their UX is optimized for conversion, and that’s what makes them successful.
We can’t help you with the first point, but we can give you a couple of tips on the second one. In this article we will present you with 20 handpicked free eCommerce templates for such popular eCommerce platforms as Magento, PrestaShop, OpenCart, WooCommerce, Shopify, VirtueMart and ZenCart. They will allow you to try out various up-to-date designs and layouts at no charge.
Ok, it’s time to see free Magento themes, free PrestaShop themes, free OpenCart templates, free Shopify themes, free WooCommerce themes and other free eCommerce templates.
Free Magento Themes
Fit Body
If you are looking for a clean design with which to improve your Magento store, consider Fit Body – a free responsive theme for sports stores. Its background images are enhanced with a distinct parallax scrolling effect that will add a feel of a third dimension to your website. Its navigation is represented by a customizable sticky menu bar with mega menu functionality. Here you can place banners, links to the categories, and the most important pages of your website. The large footer contains five columns of links, and custom text blocks. Thanks to the turquoise color scheme this free Magento theme looks fresh and modern.
Ves Yume is a responsive Magento theme with a joyful design composed of colorful tiles in metro style. It has been crafted with a product-first approach, and features a clean white background and large, clearly visible, category banners. To lighten the layout, transparent ghost buttons have been used. Ves Yume is a free multipurpose theme that can be used for any store, regardless of its merchandise.
Crafts is a free responsive Magento 2 theme that can be used for stores of multiple topics. Following the latest web design trends, this theme includes elements of metro, flat, and material design styles, successfully combining them with a multicolored pastel palette whilst slight vintage hints add a feeling of exclusiveness. This theme is robust and feature-rich, offering you a dynamic Ajax shopping cart, a powerful product page, and a convenient grid layout of category pages.
Watch Store is a rich-looking free Magento theme designed specifically for stores selling accessories, gifts, and similar products. The well designed layout of its homepage incorporates room for various banners, logos and trust seals that will increase your store’s conversion and credibility. This theme supports multiple currencies, so you will more easily be able to bring your store to the global market.
This free PrestaShop template for book and magazine online stores has adopted all the best practices of eCommerce website design. Firstly, it offers four color schemes, so you can modify it without having to write a single line of code; it has a predesigned popup newsletter window, so you don’t have to implement one yourself; its product previews are able to display a gallery of images right on the homepage. Additionally, you can apply more product labels than in most of the premium themes. The product page is great too. It provides you not only with basic eCommerce functionality, but also with an advanced system of related posts, custom social icons, and slots for payment gateway logos and trust seals.
Black Hawk will provide a solid foundation for your future online store. This free PrestaShop theme has a classic boxed layout, sharp lines, and strict monochromatic design. Its category pages offer a lot of sorting options, so this theme can be applied even for stores with a large choice of merchandise. Another feature worth mentioning is a color picker that is displayed on every product preview. This addition makes Black Hawk especially suitable for fashion stores.
Prestige is a sleek, free PrestaShop theme for fashion stores. It features 4 preset color schemes, and a font picker that allows you to make a customized text-only logo without using images. Tabs on the homepage will let you display more products (and categories) using less space, and therefore make your store’s homepage more compact and easier to navigate. You can apply up to two labels to each product (e.g. ‘new’ and ‘sale’). This theme utilizes various CSS-based visual effects such as the combination of parallax and hover zoom, animations, and color swapping. Among other features it includes a sticky mega menu, and an integrated chat module.
AP Culinary is a free responsive PrestaShop theme for medium-size and large eCommerce stores. Its rich, highly customizable mega menu can take an infinite number of shapes. Elements that can be displayed include featured products with labels and price tags, embedded videos, banners, links, and custom HTML blocks. Quick previews provide plenty of information, and allow you to add products to the cart without leaving the homepage, or the category page.
HotSpot is a free clone of One Day – a premium OpenCart template for wedding stores. HotSpot has been redesigned to cover a wider range of topics, primarily for computer and electronic stores. Just like its premium version, this template is made in flat design, with tiles of various shapes and sizes in the upper part of the layout. Product previews are simple, displaying only the name and the price. Upon mouse hover they reveal additional information: ‘add to cart’, ‘add to wish list’, and ‘add to compare’ buttons, quick view, and rating. The layout of the product page provides various pickers and filters, as well as cloud zoom, related products, and social media options.
MaxCart is a free futuristic template compatible with OpenCart up to version 2.0.2. It is a thoroughly reshaped default OpenCart template with vibrant design and a nice choice of colors. Product previews of this template include, out of the box, such functions, as ‘add to cart’, ‘add to wish list’, and ‘compare’. MaxCart is quite simple, but it will be suitable for small stores selling electronics, computers, or car parts.
Vetiver carries many features of premium OpenCart templates, but still remaining absolutely free. Its homepage is a very long scrolling page with all possible elements of user interface included. Here you will notice images with parallax effect, background videos, social and navigational widgets, and more. The product page is extremely clean and functional too. With cloud zoom, built in reviews and social buttons it is one step ahead of other free OpenCart templates, and even some premium ones. Vetiver is one of the best ways to adorn your store with a new quality-looking design at no cost.
If you look at Zorka, you would never guess that this beautiful OpenCart template is absolutely free. It comes in 4 different layouts, and each of them is crafted with pixel precision. Its authors tried to make this template as light as possible, using soft pastel colors, ghost buttons, and slight transparency effects. Zorka can be successfully used as a skin for fashion, accessory, or beauty stores. Live Demo | Download
***
Free WooCommerce Themes
Muscle Pharm
Muscle Pharm is a free WooCommerce WordPress theme designed with strong focus on parallax scrolling, lazy load, and other visual effects. Its design is basically flat, but spiced up with semi-transparent overlay blocks that change their opacity during scrolling. As with any other WordPress theme built with Cherry Framework, this one includes a set of readymade pages that are intended to enrich your website, and add variety to your marketing strategy. Use portfolios, testimonials, and blog to attract new visitors, and tell them more about your brand.
Shopper is a minimalist WooCommerce theme optimized for small stores selling exclusive items. Why so? The products load via infinite scrolling, and are arranged in 3 columns without a sidebar. Such approach to navigation makes it almost impossible to apply this theme to large stores with subcategories, cross-selling options, banners, filters, etc. But it is just perfect for stores with a narrow range of selected products. What your visitors see first after they enter your website is your store’s logo, and large expressive photos of your top products.
AccessPress Store is an all-in-one free eCommerce theme for online stores based on the WooCommerce plugin. Its homepage comprises a host of functional elements: menus, product previews, category banners, custom content blocks with parallax background, social media widgets, payment system icons, and many more. Each element of its layout loads with the help of Lazy Load effect accompanied by an attention-grabbing wavy animation.
Use this free and responsive WooCommerce theme to set up a store that will attract new customers with its clean minimalist design, and focus on rich media such as large screen-sized images, and background videos. With Shop Isle your content defines your website and not vice versa. Use high-quality imagery to highlight your top products, categories, or collections. Since the basic layout of this theme is very simple, it will be easy as a pie for you to shape it the way you want.
This beautiful floral Shopify theme will certainly win the hearts of your visitors with its elegant airy look. Its highly customizable mega menu with round-shaped images is one of the best of its kind. New elements of the page dynamically appear upon scrolling, thanks to the trendy Lazy Load effect adding some action to the process of browsing. And even more action will be added with the help of looped background videos that can be placed on the homepage, and combined with overlaid text and images.
Aptly named, Solo is a free Shopify theme designed specifically to focus on one single product. The featured product will appear on the homepage in its entire splendor, whereas other wares will be displayed in a slider in the bottom of the template. The design of this theme is artfully maintained in a minimalist, somewhat ‘shopifyish’ style. It is extremely clean, and completely devoid of any elements that can be considered unnecessary.
Computer Shopper is a free multipurpose VirtueMart template that will become an effective selling platform for your eCommerce store. It is pretty simple in appearance, but robust and powerful in functionality. Its smart layout allows you to organize your products and marketing tools so as to achieve the highest conversion rates. Thanks to the Lazy Load effect, stores based on this template load with amazing smoothness. The cherry on top is the live chat module by Olark integrated to help you provide support to your customers.
ZenCart is not among the most popular eCommerce platforms, so looking for a free template of a fair quality may be quite a challenge. Happy Kids will help you build a professional looking store with intuitive navigation. It exhibits clever, easily readable, typography, and a powerful accordion-type menu in the sidebar. It may look too narrowly focused, but in fact, repurposing it for another topic is a matter of minutes if you know the basics of coding. This theme supports 3 currencies, most modern browsers and devices.
We hope you enjoyed free Magento themes, free PrestaShop themes, free OpenCart templates, free Shopify themes, free WooCommerce themes and other freebies you’ve just seen. The aim of this roundup was to give you suggestions of some of the best website designs for the most popular eCommerce platforms, and to help you decide which platform to use for your future online store. Have we missed any great free eCommerce theme? Please, share your thoughts in the comments.
If you have questions about how to launch and maintain a successful online store, visit the respective section of StartupHub – a new online resource for those who have decided to start their online business.
The Importance of rel=”nofollow”
Annoying or Inspiring? Sound in Modern Webdesign (Best Practice)![SEO Basics: Backlinks – The Good, the Bad, and … [Infographic]](http://www.noupe.com/wp-content/plugins/contextual-related-posts-2.0.1/timthumb/timthumb.php?src=http%3A%2F%2Fwww.noupe.com%2Fwp-content%2Fuploads%2F2015%2F10%2Fseobasics-backlinks-teaser_EN-250x200.jpg&w=250&h=200&zc=1&q=75 "SEO Basics: Backlinks – The Good, the Bad, and … [Infographic]")
SEO Basics: Backlinks – The Good, the Bad, and ……
HTML5 Imports: Import HTML Files Into HTML Files
Unobtrusive Helper: Intro.js Guides Visitors Around Your Website
