Balancing Innovation and Usability for the Optimal Web Experience

The world of web design is one of the most important fields in technological development today, especially when we think about how the web is increasingly being relied on by ordinary people for common daily activities, like shopping, communicating, and keeping up with the news. We know that with more and more people using the Internet for more and more activities and tasks, there’s a corresponding increase in the number of people offering to support for online life.

And with more people breaking into the online market, there’s always new opportunities for web designers and developers to showcase our creativity and style in a way that will not only support our clients but give us the space to try new things and push the digital marketing world forward through innovation and design.

It can be hard though, with limitless possibilities and opportunities opening up for us every single day, to stay focused and strike the right balance between creativity/innovation and delivering results to clients that they can understand and use. Being ahead of the curve gives us the advantage of being able to create beyond the imaginations and abilities of our clients, but it also means that we have to make sure we’re thoughtful and consider what they are able to work with.

So, in addition to knowing interface design, web graphic design, computer languages (like Cascading Style Sheets (CSS), PHP, and HTML), and standardized code, amongst the other requirements of web design and development, we also need to balance creativity with usability to bring amazing web content to life for our clients. We can make it easy for our clients to engage with creative and fun content, without requiring them to become experts themselves. That’s what here for.

Being able to offer a range of web designs for the various platforms people will be engaging with, including WordPress, Shopify, and others, is one way to strike this balance. By tailoring your designs to a well-known platform, you can be sure that people will be able to use your work effortlessly, while still being able to bring your ideas to life. Templates don’t have to be boring – they can be anything you want. But they have the added feature of being relatable and easy to use, expanding your market and making the online world more engaging.

How to Use Dwell Time to Unlock Better Conversion Rates

Over the past few years, landing page design has become an industry in its own right, complete with an abundance of tools, courses, templates, and “hacks” for getting it right.

With bottom lines hanging in the balance, savvy designers and marketers keep a watchful eye on conversion rates. But even the best landing pages typically convert less than 40% of visitors. With so much riding on conversion rates, you’d think analytics tools would do a better job helping designers improve landing page performance. Yet, out of the box, tools like Google Analytics are completely inadequate for understanding why pages are converting poorly.

Bounce rates and demographic data tell us almost nothing about what a user is actually doing when they visit your landing page. Instead, we need real, actionable insights.

Dwell time-the amount of time a user spends on your page-is the key to unlocking this information and increasing your conversion rates.

Why Dwell Time Matters

When most visitors to your landing page bounce, the obvious question is: why?

Are there issues with your website’s performance? Do your traffic sources stink? What about relevance and trust? Are you providing all the information your users need to convert?

Dwell time is a critical metric because it can indicate user intent and help you narrow down the root cause of your page’s poor performance.

If users bounce almost immediately, it’s highly likely that your traffic sources or site performance are to blame. When users scroll and read the site, only to bounce a few minutes later, it can indicate that users are interested in your offer, but aren’t comfortable moving forward without more information.

In fact, Google takes this indication of user intent so seriously that it actually uses it as a search ranking factor.

Why Current Tools Don’t Work

Given the importance of dwell time, you’d assume that most analytics tools would measure it out of the box. Unfortunately, this isn’t the case.

Most analytics packages-including Google Analytics-calculate session duration by measuring the time between pageviews.

This means that session duration stats never include the time a user spends on the final page they view. If a user hits your landing page and never views a secondary page, their session duration will read as 00:00:00, even though they may have spent minutes reading and interacting with your page.

bounced sessions

This is a huge problem. Luckily, it’s easy to fix.

How to Measure Dwell Time

We knew that measuring dwell time was important when building the landing pages at Swish, so we wrote a simple JavaScript snippet to measure it in Google Analytics.

Add this script to your page somewhere before your Google Analytics Tracking code:

(function (global) {
    function trackDwellTime() {
        var intervalInMilliseconds = 1000;
        var timelimit = 3 * 60 * 1000;
        var label;

        var timeSpentInSeconds;
        var timeSpent;

        if (typeof arguments[0] === 'string') {
            label = arguments[0];
            timeSpent = intervalInMilliseconds;
        } else {
            timeSpent = arguments[0];
        timeSpent = typeof timeSpent === 'undefined' ? intervalInMilliseconds : timeSpent;
        timeSpentInSeconds = timeSpent / 1000;
        setTimeout(function () {
            if (typeof gtag === 'function') {
                gtag('event', 'Dwell Time', {
                'event_label': label,
                'event_category': 'engagement',
                'value': 2
            } else if (typeof ga === 'function') {
                ga('send', {
                    hitType: 'event',
                    eventAction: 'Dwell Time',
                    eventLabel: label,
                    eventCategory: 'engagement',
                    eventValue: timeSpentInSeconds
            } else {
                console.log("No Google Analytics Code Found");

            if (timeSpent < timelimit) {
                trackDwellTime(timeSpent + intervalInMilliseconds);
        }, intervalInMilliseconds);
    global.trackDwellTime = trackDwellTime;


This code will fire a “Dwell Time” google analytics event every second for the first 3 minutes a user is on your page, but you can easily modify it to fire at a different interval or for a different duration.

To fire the tracking script, add the following right after your Google Analytics Tracking code on pages you want to track, replacing “label” with the name of your page or some unique identifier you’d like to see in Google Analytics:


This code will work with the newer gtag.js version of Google Analytics, as well as the older analytics.js version.

Analyzing Dwell Time Results

Once you’ve got your code installed, you can verify that it’s working by navigating to your page and opening up the “Real-Time” section of Google Analytics and navigating to the Events report.

Real-Time Report

Assuming that’s working, it’s time to create some user segments so you can analyze user behavior based on dwell time.

I like to segment dwell time into the following buckets:

Under 2 Seconds – A high percentage of users with dwell times under 2 seconds can indicate page performance issues or poor traffic sources, since these visitors are bouncing so quickly that they’re likely not really reading anything at all.

2 – 10 Seconds – Users who spend between 2 and 10 seconds on your page are likely reading above-the-fold content, but not much else. This may indicate that they believe the page isn’t relevant or trustworthy and bounce as a result.

11 – 30 Seconds – Users who spend between 11 and 30 seconds but still don’t convert are likely reading your landing page, scrolling, and interacting. There’s good news and bad news here. The time they’re spending on your page indicates clear interest. The bad news is that your page likely isn’t answering important questions or addressing key concerns.

31+ Seconds – Users who spend more than 31 seconds without moving on could be slow readers, but many of them simply got distracted and left the tab open. It’s helpful to segment this group out; if you find lots of users in this group, consider breaking it into multiple sub-groups.

These buckets serve as general guidelines; you can and should segment based on your own intuition and unique business situation.

Once you’ve decided on your segments, you can create them in Google Analytics by using the Segment Builder. From the top of most reports, you can click Add Segment, then New Segment:

Add New Segment

Once you’re in the Segment Builder, select the Conditions segment type. You’ll want to add filters for the “Dwell Time” event action, as well as the event values, in seconds, you’re trying to match:

Segment Builder

Repeat this setup for each of your segments. Once you’ve saved your segments, you can break down any report based on them:

Segments Report

Looking at the breakdown of users and which segments they fall into can help direct your thinking about what to change for the next iteration of your landing page. I’ve personally used this tactic to gain insights that resulted in doubling my original conversion rates.

Beyond Dwell Time

If you need even more insight into what’s driving your landing page performance, usability tests, user interviews, and session replay tools like FullStory can be incredibly valuable. These approaches require a bit more investment, but when you’re really stuck, they can definitely be worth the time and money.

If you’re just starting to iterate, however, dwell time is a quick, cheap, and easy way to analyze your landing page bounces and pinpoint areas for improvement.

The post How to Use Dwell Time to Unlock Better Conversion Rates appeared first on Speckyboy Web Design Magazine.

8 WordPress Plugins to Support Activism

When we think about the impact that WordPress has had on the web, one area that often comes up is their goal to spread the democratization of publishing. I think it would be fair to say that they’ve done a great job of it. Just about anyone with internet access can create a blog and publish anything they’d like.

The beauty of that is something to behold. People are using the platform to do more than just write down their thoughts, though. They’re taking the opportunity to spread the word about causes they care about – social, environmental and political.

As more users have worked to bring people together, plugin developers have created a number of tools to help make the task a bit easier. Let’s have a look at 8 WordPress plugins that can we can use to further activism in an efficient and peaceful way.

Speak Out! Email Petitions

Petitions are a big part of activism and WordPress features several options. Speak Out! Email Petitions is a fork of a previously popular plugin that appears to have been abandoned. The plugin is simple, but effective. You create your petition, people sign it and the results are emailed along to whomever you wish. Signers can also share the petition on social media. You can also export results and set signature goals, as well.

Speak Out! Email Petitions

Participants Database

Participants Database helps site owners collect just about any type of information. It was originally developed to help an organization that wanted to maintain a list of concerned voters. Use it to create custom forms that can be submitted into your site’s database. From there you can display filtered results and it’s even searchable. There are also a collection of add-ons available to bring more functionality to the table. This is a highly-flexible plugin and could be a help to virtually any organization that needs to maintain a database of people.

Participants Database

WP Issues CRM

WP Issues CRM is a plugin that is just getting off the ground and has a tiny user base. But there is vast potential. Essentially, it’s a tool to manage high-volume feedback – the kind that an elected official or corporate executive may have to deal with. It works with popular form plugins like Contact Form 7 and Gravity Forms to collect data. Plus, data can be merged in from other sources. The plugin can parse data from emails (like addresses and subjects), manage automatic replies and features a powerful UI for viewing and searching through responses.

WP Issues CRM

PTA Volunteer Signup Sheets

Those looking to recruit volunteers will enjoy the flexibility of PTA Volunteer Signup Sheets. While the name suggests a usage for school parent/teacher associations, the plugin can be used for virtually any volunteer-based organization. You can create events that are single, multi-day or recurring. From there, volunteers can register on your site to lend a hand. The plugin features the ability to send email reminders, add specific tasks and time ranges to events and email all volunteers right from the WordPress admin. There are also a multitude of add-ons available for extended functionality.

PTA Volunteer Signup Sheets

Improve My City

Improve My City is a platform that allows users to post issues of local interest to your website. For example, a city could use this to allow citizens to report problems with roads or broken equipment at a local park. Pictures can be uploaded to further illustrate the issue. Admins can then browse through issues and even assign them to specific people. This could be of great use to anyone from a small town to a group of volunteers.

Improve My City


Yes, everyone knows BuddyPress – the social platform for WordPress. It’s both well-known and a great option for any type of activism. The ability for a community to stay in touch keeps everyone involved. What’s more, it can be much more efficient than relying on traditional social media. Members won’t have to filter through all the unrelated noise of Facebook and Twitter – all the relevant information they need is right in one neat package. Combine it with bbPress for even more capabilities.



Give’s stated goal is to “Democratize Generosity”. The plugin enables an organization to accept commission-free donations online. It works with PayPal standard out-of-the-box and a number of other payment gateways via add-ons. The donation forms are both attractive and effective, making it easy for visitors to become donors. And there is a robust back-end to the plugin that helps you to keep track of donors and view reports.



Organizations based in the United States can use CongressLookup to help users find their representatives in Congress. It works with Google Maps and Google Civics API (you’ll need separate keys to use both) to list officials based on a user’s address. Search results show name, party affiliation, contact information and more.


Making Sure Your Voice Heard

Regardless of your cause, WordPress offers some pretty powerful tools to help you make a positive difference. The plugins above all have different specialties, but they also put you in the driver’s seat when it comes to achieving your goals. You have the ability to tailor your website to revolve around your message.

The post 8 WordPress Plugins to Support Activism appeared first on Speckyboy Web Design Magazine.

What Are Render-Blocking Resources & How to Fix Render Blocking Issues

Render-blocking resources are one of the most common reasons for slow loading websites. And if your website is not fast enough, not only are you hurting your visitors’ user experience, but your search engine rank as well. The bad news is, if your website is slow, you are losing customers and revenue.

However, there’s also good news – you can improve your website speed by eliminating render-blocking resources. In this article, we’ll explain how render-blocking resources impact your loading times and show you how to fix them.

What Are Render-Blocking Resources?

The most common render-blocking resources are JavaScript and CSS files that are located in the head of your web page. They load in above the fold area (or the area that you normally see on a website before scrolling down to see the rest of the content) and are a part of the critical rendering path used by a web browser.

In layman’s terms, that means that certain events need to happen in order for your browser to properly display (render) the initial view of any web page. Here’s an example of how a basic rendering path works:

  • The browser downloads a web page that consists of an HTML file which holds the structure of the web page
  • The browser then reads the HTML and notices 3 additional files: a css file, a javascript file, and an image
  • The browser will first download the image
  • The browser then realizes it can’t continue displaying the page without grabbing the CSS and JavaScript
  • The browser downloads the CSS file and reads it to make sure nothing else is being called
  • The browser downloads the JavaScript file and reads it to make sure nothing else is being called
  • The browser can finally display the web page

While the browser is busy loading and reading each of the CSS and JavaScript files, your visitors are staring at a blank screen, waiting for your site to load. If you’re using a CMS like WordPress, your browser can be busy for quite a while because it will have to load not only the style and script files of your theme, but the script and style files that come with WordPress itself as well as those that come with all the plugins and widgets that you’re using.

When it comes to optimizing your website speed, the first task on your list should be reducing the time it takes for your users to be able to view and interact with your content. The easiest way to do that is to optimize your critical rendering path.

How to Fix Render Blocking Issues

Now that you know what causes render-blocking issues and how they impact the speed of your site, let’s talk about how to fix those issues.

Render-Blocking CSS

There are three ways to fix render-blocking CSS issues:

  • Properly call your CSS files – your CSS file should be linked in your HTML file like so: <link rel="style.css" href=“style.css"> instead of relying on using the @import method. The @import method will usually be near the top of your regular stylesheet and cause the browser to go back and find the imported file before it can read the rest of the CSS file and result in an even bigger delay when it comes to rendering your web page
  • Lessen the number of CSS files in the critical path – if at all possible, combine all the different CSS files into one and remove the call to those files from your HTML

Render-Blocking JavaScript

To remove render-blocking JavaScript, you need to know how many JavaScript files are loaded and where are they called in your HTML. A good way to find this out is to use Google PageSpeed Insights tool. When Australian-based cleaning company, This Is Neat Cleaning, was building their website, they used Google’s PageSpeed Insights as their benchmark, testing various scenarios to find out exactly what they needed for both mobile and desktop.

It was evident from testing, that inserting the majority of scripts at the bottom of HTML files, produced the best results. The major reason being that moving scripts to the bottom of the page removed render blocking javascript from stalling the user experience. With critical CSS still being loaded above the fold, the user could still fundamentally use the site, while interactions and functionality were still being loaded in the background.

Using a Plugin

Of course, as with anything WordPress related, you can use a plugin to fix render blocking issues. With over a million total active installations, it was a no-brainer that This is Neat Cleaning would use W3 Total Cache for caching, minifying, and performance optimization.

Here’s how you can use W3 Total Cache to fix render-blocking issues.

In your WordPress dashboard, go to Performance > Settings and scroll down to the Minify section. Check the box that says Enable and then elect Manual from the dropdown menu next to minify mode. Save settings. You’ll then need to add all the scripts and styles that you want to minify.

To find out where the scripts and stylesheets that are render-blocking are located, go to the Google Page Speed Insights Tool and analyze your website. Then, look at the suggestions tab and find the section that reads: Eliminate render-blocking JavaScript and CSS in above-the-fold content. Click on Show how to fix and select and copy the URL of the file.

Go back to your WordPress dashboard and navigate to W3 Total Cache > Performance > Minify. Scroll down to the JavaScript section and under Operations in areas make sure the embed type is set to Non-blocking using defer for the <head> section. Then, click the Add script button and paste the URL you copied from the Google PageSpeed tool.

Once you’ve added all the script files, scroll down to the CSS section, click Add a stylesheet and add the URLs of the stylesheet files copied over from Google PageSpeed Insights.

When you’re done, click the Save settings and purge cache button.

Final Thoughts

Render-blocking resources can cause havoc when it comes to website speed. Luckily, there are a few ways to fix those issues so use the tips provided here to improve the speed of your website and ensure your visitors have the best possible user experience.

The post What Are Render-Blocking Resources & How to Fix Render Blocking Issues appeared first on Speckyboy Web Design Magazine.

Looking at the Most Popular Google Fonts

The impact Google Fonts has had on the web is undeniable. Since its somewhat humble beginnings in 2010, the 800+ fonts now hosted by the library have been viewed well over 19 trillion times. Of course, the likes of Adobe and others have followed suit with font repositories of their own. The difference is that everything Google Fonts has to offer is free.

And it’s a good thing that free web fonts have come along. Typography on the web used to be incredibly boring. It started out with the limitation that a specific font had to be on a user’s system in order to be viewed correctly in a browser. Eventually, @font-face brought more options to the table. But licensing issues were often difficult to deal with (if dealt with at all).

The brilliance of Google Fonts is the flexibility you have with where and how you use it. You can load fonts via Google’s service or download them to place on your own server or device. Plus, they receive contributions from font artists worldwide. That has led to an incredible variety of available styles.

Of course, some fonts tend to be more popular than others. Thanks to the openness of the library, Google provides a nifty Analytics page that breaks down how much usage each font receives. Let’s take a look at 10 of the most-used fonts in the library. Note that, in some cases, multiple members of the same font family are separate entries on Google’s list. We’ll avoid repeating ourselves in those instances.

Open Sans

Open Sans

It’s probably not much of a surprise that Open Sans leads the way as you tend to see it all over the place. WordPress even used it as the default dashboard font at one point. It’s clean, easy-to-read and comes in an abundance of styles. The condensed version also ranks as one of Google’s more popular choices.



Again, we Google Fonts fanatics love our sans-serif type. This one is great for body text as it lends itself well to reading at smaller sizes. The look is also very modern and matches up nicely with more minimalist designs. It also saw a massive 65% jump in usage from February 2017-18. Also note that the condensed version is the sixth most-used font as well.



Did I mention the obsession with sans-serifs? Lato is one that I do find myself using a lot. As with its mates in the top three, it comes in a variety of styles and is a jack-of-all-trades. I think that helps to explain its popularity, along with the fact that it fits in with modern design trends.

Slabo 27px

Slabo 27px

Finally, a serif in sight! What makes Slabo 27px a bit unique is that both it and its sister font (Slabo 13px) are optimized for viewing at the pixel size reflected in its name. This flavor is a great choice for producing clear, readable headlines.



Many designers look for web fonts that resemble classics – but without the licensing hassles. Oswald is one that is pretty well on point with the popular Alternate Gothic family. It has that same timeless look that brings a touch of class to any website.

Source Sans Pro

Source Sans Pro

This font is actually historic in that it’s Adobe’s first-ever open source typeface. Their intention was to create a font that would be a good fit for UI. It certainly does hold up as being very readable. There is a nice spacing between characters and plenty of styles to choose from.



Inspired by the Montserrat neighborhood of Buenos Aires, Argentina, this font sports a classic urban style. It’s a great all-purpose font that adds a bit of pizzazz to both headlines and body text. Its popularity has also led to the Alternates and Subrayada versions.

PT Sans

PT Sans

Created for the “Public Types of Russian Federation” project, Google reports that the majority of PT Sans’ usage is in Russia. In fact, it features character sets for every title language in the country. That being said, designers around the world are taking advantage of this font’s clean and modern look.



Raleway was developed as a headline font meant to be used at larger sizes. However, it does work quite well for body text as well. Personally, I don’t know if any other font on this list fits the modern, minimalist style better. It’s also available in a dots version.



Rounding out the list is Lora, a subtly-detailed serif font. While it only comes in four basic styles, that seems to be more than enough for just about any use.

Bringing Great Typography to the Web

What stands out about the fonts above is that they are overwhelmingly a reflection of their core audience: designers. While the library is undoubtedly used by non-designers as well, the choices at the top of the list seem to show a professional attitude towards type. Notice the lack of any comic or whimsical styles.

Overall, these fonts have brought about a typographic revolution to the web. That’s something we designers should all be thankful for.

You might also like The 100 Best Free Fonts for Designers or these Fantastic Google Web Fonts for Headings, Paragraphs & Branding.

The post Looking at the Most Popular Google Fonts appeared first on Speckyboy Web Design Magazine.

10 Outstanding Call-to-Action Snippets & Examples

The good old Call-to-Action (CTA) has become a staple of the web. They’re around to tell users exactly what we want them to do. Buy this book, download our free guide, contact us for more information, etc.

Sometimes, though, it all looks and feels like cheesy marketing talk that’s been both written and designed by someone detached from reality. They might even convince you to do the exact opposite of the intended action.

So, what makes a good CTA? Here are 10 examples of Calls-to-Action that are well-designed, cleverly written or just plain unique.


Full disclosure – I think MailChimp does as good a job with their CTAs as anyone. In fact, there were a number of instances on their site to choose from. But, my absolute favorite is their “Prepare for Launch” dialogue for sending out a mail campaign.

Even if there were no text, the animated chimp hand hovering above the red button alone lets you know what you’re supposed to do. It’s simple, fun and I feel a strange sense of accomplishment when I click the “Send Now” button.



ManageWP has made the bulk of their home page a CTA. The headline and brief descriptive text tell you exactly what their service does and simply asks for an email address to get started. The visuals are interesting and the content is right to the point.


Blue Apron

Checking out Blue Apron’s site, their home page really is a series of CTAs. I love this particular section because it conveys what you’re getting and how much it costs in an easy-to-read format.

Even the little Free Delivery icon is a nice touch. Best of all, they used a background of fresh food ingredients to drive the point home. Who’s hungry?

Blue Apron


Like Blue Apron above, Spotify features a background of its main selling point in its CTA. But they take a decidedly simpler approach the rest of the way.

This slider highlights a few important things about the streaming music service, but mostly encourages you to click or scroll for further detail. It doesn’t try to wow you – just make it easier for you to sign up or learn more.



Zillow is the place to go for all things related to researching real estate. And right from the start, you’ll find a CTA area that lets you do all the things. It’s all right there, without the need to search around. This is as useful as a call can get.


B&O Play

An offshoot of Bang and Olufsen, B&O Play carries on the minimalist design and branding of its parent. And this Call-to-Action is a perfect example. You get a big dose of beautiful industrial design, along with calls to see the featured collection or start the process of buying these slick headphones.

While it’s easy to look at this and say, “It looks nice enough, but so what?” the point is that you should treat CTAs as an important part of your overall brand. They should reflect who you are and what you do.

B&O Play

Mercy Corps

When you’re tackling some of the world’s most difficult situations, there’s no time to waste. Mercy Corps creates a sense of urgency with their CTA. The photo, coupled with a bold, serious headline ensures that visitors understand the gravity of it all.

They’re helping us to see the people affected, and providing us with a way to respond.

Mercy Corps


Home automation masters Nest bring the message of Earth Day and tie it in perfectly with their energy-saving thermostat.

The twinkling stars in the background coupled with the larger-than-life product shot really make an impact (it makes me think of a planet floating in space). What’s also nice here is that they allow the background some room to breathe.



Skagen is a Danish company that sells minimalist watches, along with other fashion accessories. This CTA features an outstanding use of color and brand-appropriate simplicity. The lesson here is that, when you have a unique product, just let it speak for itself.



Patagonia is all about the experience of being outdoors. Their home page slider is a mix of products and causes – like this beautifully crafted image promoting an environmental film.

The images are big, bold and they aim to bring a little bit of the wild to your screen. It’s right on point with their target audience.


Calling for Clicks

A good CTA should consider the audience and the desired result of a user interaction. Color and imagery should be a reflection of your brand and help to convey the message. Motion is great, so long as it’s not outlandish. Text should be short and to the point.

The Calls-to-Action above all do a great job of guiding the user in a fairly simple manner. It goes to show that you don’t need something overly wordy or complicated to convince people to act.

The post 10 Outstanding Call-to-Action Snippets & Examples appeared first on Speckyboy Web Design Magazine.

12 Landscape Scenes Built Entirely With CSS & SVG

You can do some pretty crazy stuff with SVGs. It’s possible for developers to code graphics onto a page without any image files just using the SVG & canvas feature.

This leads to really cool projects like the pure SVG landscapes I’ve listed here.

All of these projects are totally free to edit and clone on CodePen. They work on SVG code along with some basic CSS & JS to create animations, distortions, and parallax effects.

Hawke’s Bay

This example of a beautiful bay landscape was developed by Louis Coyle. It follows a poly-styled look mimicking the polygon display typically found in 3D rendering.

It’s a popular effect with SVG and JavaScript, but it’s certainly not simple to pull off.

Louis uses the TweenMax library to create the animations which are elegant in both style and code.

If you’ve ever wanted to dig into raw SVG code this snippet has plenty to learn from.

Low Poly Landscape

Here’s another landscape modeled after the low poly look.

This one comes from developer Luke Reid and places a much stronger focus on 3D effects. The whole layout feels very real, and the sky gradient sprinkled with stars breathes life into this design.

If you look at the JavaScript code you’ll see the star positions are generated randomly. This is a cool effect if you’re ever designing an SVG background or hero header style.

SVG Landscape Animation

Evan Winston developed this custom animation which slowly drops all visible elements into view.

It’s a pretty cool effect, and it’s something that anyone could create. Granted this may not be so useful as a huge background illustration, mostly because of the time required for the animation to complete.

But you could do something similar with custom SVG icons on a website. There are plenty of tutorials out there to help you design basic SVGs and then animate them using code from the snippet above(also running on TweenMax).

Marine Landscape

For a basic lakeside view I’m really digging this SVG snippet. It sports a few basic page animations like the waves in the water and clouds in the background.

All of this stuff is pretty easy to do with a little JavaScript. But you’ll notice this snippet is made with pure css making it even more impressive!

Modern CSS3 animation is most useful in websites with UI/UX animations but you can use it for landscapes or illustrations too. That’s half the fun of being a developer.

Winter Landscape

This winter landscape is a reminder of the crisp white snow we see every year.

Andrey Sorokin created this basic animation with just SVG code and some JavaScript. It can be slow to animate so you may have to give it a minute to see the full effect.

I’m most impressed with the quality of the easing effects and how well this works in the browser.

Based on how many elements are animating into view I would’ve assumed a bit of sluggishness, yet it loads incredibly fast considering how much is happening.

Not to mention the animation of the sun coming out from the tree is just plain delightful.

SVG Scenery

We’ve seen massive growth in flat design trends and semi-flat designs that all use basic colors without gradients.

This snippet follows the same style with hard edges for the shadows and corners.

It’s a beautiful snippet and certainly one of the easiest SVG-only landscapes to work with. Even if you’ve never used SVG code before this snippet offers plenty to look into and lots of SVG/XML attributes you can search on Google to learn more.

Natural Landscape

Developer Amr Zakaria created a similar flat design with this landscape using animated boats and planes to grab your attention.

The whole thing runs on pure CSS and works with some pretty clear CSS keyframe animations.

All of this can be replicated for a background on a webpage if you have the patience to get it working. The toughest part is getting this to be fully responsive for mobile screens.

Parallax Lights

Out of all the parallax effects on the web this one is very basic. However it’s also quite impressive since the whole thing works on just CSS, no scripting required.

All the elements including the street lamps are designed with SVG shapes and CSS effects.

If you look real close you’ll notice the lamps actually use the CSS shadow effect to create a realistic glow.

Basic Animations

In this updated SVG landscape you’ll find a slew of custom elements that bounce into view.

Creator Stef van Dijk pays careful attention to each animation by adding bouncing and gravity-like effects with each piece. For example, when the mountains drop into view you’ll notice a rebound effect from the ground.

This is what you get when you pay careful attention to detail and it’s why I’m such a big fan of modern web animations.


Have a look at this pen for a supersized background animation. This whole thing works on SVGs and pure CSS without any JavaScript.

Layers of the landscape slowly come into view, and they all have their own keyframe animations. But once they’re in view you’ll notice some elements keep on moving(like the sun and clouds).

Designing something like this takes a lot of time. But it’ll also get you real familiar with SVG syntax along with the basics of CSS animation.


While this landscape is very simple I also think it’s a great teacher for new frontend coders.

Felix De Montis built this project from scratch with a small amount of SVG code for the grass, hills, and trees. It’s easy enough to replicate that and change the positions using CSS too.

Overall if you’re into simple SVG designs this one is a great place to start. Felix also uses the LESS preprocessor if you’re looking for something beyond basic CSS.

Parallax Page

Chris Gruber developed this immaculate parallax landscape which moves based on your mouse movements.

But along with that he also animated certain page elements like the sailboat and the background clouds.

This all requires very little JavaScript since it operates on less than 20 lines of jQuery. All the more impressive considering how detailed this is.

The post 12 Landscape Scenes Built Entirely With CSS & SVG appeared first on Speckyboy Web Design Magazine.

Freebie: “Dropcast” Website Template (HTML, Sketch)

Today we’re thrilled to share another modern, responsive HTML template for podcasts with you.

Dropcast is a responsive HTML/CSS/Javascript template which comes with Sketch files and a fully working site with SCSS. It has two page templates and it works very well for podcasts landing pages or blogs. You can easily customize the style.

You can use Dropcast freely for your personal project or commercially, for your client work.

Live demo

Check out the live demo: Dropcast Live Preview

Download the template for free:

You can download the ZIP file of the template and the design file here:

Download Dropcast (ZIP file 4.8 MB) Download the Dropcast design file (Sketch file 58.6 MB)

Use it freely but please don’t republish or redistribute the template.

We hope you enjoy this freebie and find it useful!

If you’d like to contribute and publish your freebie on Codrops drop us a line.

Freebie: “Dropcast” Website Template (HTML, Sketch) was written by Amie Chen and published on Codrops.

Skyrocketing WordPress Speed: The Ultimate Guide To WP Fastest Cache

WP Fastest Cache is a versatile plugin that helps decrease the page load time of your website by creating quickly rendered HTML files that are stored and accessed by subsequent visitors.

Since a WordPress website is rendered through PHP and MySQL it requires RAM and CPU usage each time the page is requested from the server. This slows down the load time and places more effort on the user’s computer or device, as well as the database. However, with a cache system, the page is rendered one time and then stored as a static HTML file, thereby reducing the load time for each new visitor.

How WP Fastest Cache Works

After installing the plugin, start digging into the customization settings by clicking on the WP Fastest Cache link in the menu bar.

This directs you to the Options page, where you will really begin to utilize the plugin’s features. We will focus on each one of the tabs in the option menu.

1. Starting with the first tab, Settings, we will start implementing the caching system. Check the first box, Enable, to allow the plugin to start working on your site.

2. The next option, Widget Cache, is grayed out, which means it is not available in the free version of the plugin, in order to use any of the premium option, you will need to upgrade to the paid version. We will focus on the free options in this tutorial.

3. The Preload option will generate the page caches automatically, instead of when someone visits the site. Choose which features you want to automatically cache and click OK.

4. The next option allows you to block the cached version for logged-in users and will cause the page to load naturally.

5. After that, we’re also given the option to block the cached desktop page when someone accesses the site from a mobile device.

6. The subsequent Mobile Theme would allow you to cache the mobile version, but is available only to those who purchase the premium version.

7. New Post allows you to choose which cache files to clear when new content is published on your website.

8. Similar to the previous option, Update Post allows you to choose which cache to clear when content is updated on your website.

9. Minify HTML allows you to decrease the amount of HTML that composes your cache file, thereby also decreasing the load time for your visitor.

10. Minify CSS actually decreases the size of your CSS files to make page rendering faster.

11. Combine CSS will integrate multiple CSS files into one file in order to reduce the number of HTTP requests and decreasing load time.

12. As with the CSS, the Combine JS option will combine multiple JavaScript files into one file for fewer requests from the server.

13. Gzip compresses the size of files and resources being sent from the server, allowing them to load faster.

14. Browser Caching enables frequently used files (such as CSS and images) to be stored in a visitor’s web browser so the resources will not have to load each time the visitor views the page.

15. The last option on this page is Language. This will only change the language in which the options menu appears for this plugin, not for your site as a whole.

Choose Turkish, for example. Only the words contained in the plugin’s options pages will be changed.

English is the default. Make your selection from the dropdown menu, then click Submit to save the changes you’ve made on this page. You’re well on your way to optimizing your site with a cache system.

Next, let’s check out the second tab in the menu. Delete Cache.

Delete Cache

The grayed out features are only for premium subscribers, but the two main options at the bottom are still available.

  1. Click on Delete Cache to delete every cached file.
  2. Choose Delete Cache and Minified CSS/JS to delete all caches as well as the minified CSS and JS files created in previous options. The minified versions of CSS and JS are kept in a separate file on the server that the rest of the cache, so choose this second option to delete those as well.

That’s it for this tab. Not bad, right? Let’s move on to the next tab, Cache Timeout.

Cache Timeout

1. In this tab, we have the chance to create Timeout Rules. Click Add New Rule to bring up an options box.

The first option in the box is If REQUEST_URI. Click to view a dropdown menu with four choices: All, Home Page, Starts With, and Is Equal To. Choosing All will cover every URI requested by visitors, while the following three options will limit the timeout rule to either the Home Page or a URI Starting With or Equal To the value you type in the text box next to the menu.

Once you have chosen the URI type, choose what happens Then from the dropdown menu. The options in this box are for the time period in which the cache is deleted.

Choose how frequently the cache should be timed out, and then click Save. You will see your new timeout rule appear.

Create as many rules as you want in order to cover different areas of your website. Choose the type of URI (whether homepage or starting with a specific URL) and choose the frequency in which the cache is deleted for that area.

Great, that was the Timeout Rule section. Let’s move on to the next tab. Notice that Image Optimization and Premium contain content only available to premium subscribers.

We will move on to the Exclude tab. The first option here is to exclude certain pages from being cached.


1. Notice there are two default rules to exclude the wp-login.php and wp-admin pages. These cannot be edited or deleted.

2. Click Add New Rule to create a new rule.

3. Select the type of page, content or URI you would like to exclude, and click Save.

4. You will see your new exclusion rule appear. Any rules you create can be edited or removed by clicking on them.

5. The next section to which you can add rules is the Exclude User-Agents area. Again, notice two default rules that cannot be changed or removed. Choose Add New Rule to define a rule.

This option allows you to create a rule that excludes caching for a certain type of user agent. Type your content and click save.

6. The last three options allow you to exclude specific cookies, CSS or Javascript. Use these in the same way by clicking Add New Rule, choosing the excluded URI and saving the changes.

You should now have a good handle on the types of files that are being cached, minified or combined, as well as how to exclude certain types of pages, content or user agents from utilizing the cache system.


Of the two tabs left to explore, one is available only to premium subscribers. So, we will take a brief look at the last tab we can utilize. Click on the CDN tab.

In a nutshell, CDN, or Content Delivery Network, is a system of storing your cached files in different geographic locations to minimize the amount of time it will take for a website user in another country to access the files.

There are different CDN providers which can help deliver your content speedily. If you have an existing account with any of the providers listed above, click on it to get set up. If not, it’s easy to create an account with MaxCDN to get started using this additional feature.

The post Skyrocketing WordPress Speed: The Ultimate Guide To WP Fastest Cache appeared first on Speckyboy Web Design Magazine.

FOMOOP (Fear of Missing Out on Projects)

For freelance web designers, finding a measure of comfort in our workload can be quite difficult. It seems like we’re either hair-falling-out busy or bored out of our minds. Happy mediums don’t really exist.

Then, there’s always that worry that comes along with not knowing what’s just around the corner. Just because we’re busy today doesn’t mean that we’ll stay that way for long.

It seems like this is at least somewhat instinctual, as we are keenly aware of what it takes for survival. That makes a lot of sense. With the wild rides we often take as freelancers, it sometimes feels like we’re fighting for our lives in the jungle.

That’s why one of the hardest things for us to do is to turn down a project. Even if we may not necessarily have time to take on more work, we still have that fear of missing out.

But, how rational is that fear? And, if we do take on the extra work, how do we manage it?

Just Like the Sword of Damocles

Greek mythology was never my strong point in school, but for some reason the Sword of Damocles has stuck in my head. In my attempt at a very un-scholarly summary, it’s the story of a man who gets to switch places with the king for a day. As he sits on the throne, there is a sword dangling above his head quite ominously. At any minute, he could meet his doom. It’s all too much for him and he begs the king to switch back to their normal roles.

In its own modern way, the whole idea of freelancing can feel a bit like that. There’s so much uncertainty and you’re only a frayed thread away from failure. From my own perspective, the fear is both legitimate and rational – so long as you don’t take it too far.

If you spend your days moving from project to project, there is always that thought of “what if there are no more projects” in the back of your mind. While that’s natural, you also need to take a look at your situation as a whole.

For example, if you have at least some clients that provide you with steady income (like an agency), then you aren’t nearly as likely to crash and burn during a slow time. You’ll at least have something to help get you through until things pick up. That, in turn, could save you from taking on too much.

At the same time, you also need to ensure that your workload doesn’t come to a screeching halt. It’s a situation that requires a delicate balance, for sure.

Just Like the Sword of Damocles

Too Much or Not Enough?

One of the truisms of the freelance life is that opportunity always knocks at the very moment when we already have too much to do. It’s like booking two projects, waiting months for the clients to get their stuff together – only to have them both come in at exactly the same time. It just wouldn’t be life without this sort of hurry-up-and-wait dynamic.

Why does it always seem to work out this way? In my case, it seems to happen during certain times of the year when people are really focusing on their websites (after the New Year and again in the fall). But it might well be the randomness of the universe in a lot of instances. Either way, it presents another potential headache.

When an opportunity to book a project comes along, especially during a busy time, it’s important to look at it as calmly and objectively as possible. This is difficult because it can be so easy to feel overwhelmed by everything that you’re doing. But don’t despair – there are some things you can do to help you make the right choice:

It’s Just Another Project
The key is to try and weigh the benefits of each project as you would at any other time. Forget about your schedule for a moment and first determine whether or not it’s a good fit for you.

Maintain Perspective
No matter how crazy your schedule looks at the moment, realize that it’s not going to stay that way forever. There are peaks and valleys when it comes to work. So it’s a good idea to try and look at the bigger picture when weighing your options.

Consider the Financial Implications
There’s an old saying that you should “strike while the iron is hot”. Turning down a project now doesn’t mean you’ll have a similar opportunity down the road. That could have a negative impact on your finances during a slower period.

Will It Be Too Much?
The best way to determine whether or not a project will be too much to handle is by studying not just the project requirements, but the client’s flexibility as well. It’s worthwhile to explain your situation and see if there is any wiggle room with the project’s deadline. If they aren’t willing to be flexible, then perhaps things just won’t work out.

In the end, it’s worth taking a bit of time to think about these types of opportunities. Even if it doesn’t work out, at least you did your due diligence.  And the potential benefits could be great.

Too Much or Not Enough?

Managing Chaos

The ability to juggle multiple projects is one of those things that freelancers seem to be born with. But even the best out there have a breaking point. When you face pressure from several different clients with upcoming deadlines, panic can start to set in.

So sure, why not add another project or two onto the pile? Kidding aside, making the best decisions for your business sometimes means having to take on a lot of responsibility. Managing it all is tough and requires a steady approach, including:

Accomplish What You Can, When You Can
Take some time each day to work on each project in your queue. And, importantly, don’t waste time. If you’re stuck waiting for a client to respond or provide you with assets, move on to something else. While it can be difficult to shift gears, you may just make some extra progress.

Say “No” When You Have To
Part of our job often requires responding to unexpected requests from clients. If you’ve taken on a good bit of extra work, you may have to decline or delay some of these tasks. Remember that you can’t be everything to everyone.

Find Some Quiet Time
I don’t often advocate working nights and weekends unless the situation absolutely calls for it. But there are occasions where being in front of your computer after hours can be very productive. It’s okay to do this once in awhile, just be wary of burnout.

Managing Chaos

Freelance Feast or Famine

The situations we face as business owners are quite different from those faced by employees. Instead of simply being assigned work, we often have to decide whether or not to accept work. That’s a lot to deal with. And, when business is booming, you might wonder how you’ll manage it all.

Of course, there are no easy answers for when you should take on a project or when you should pass. That’s really up to each of us as an individual. But one thing that should be universal is that each opportunity should be looked at based on its own merits. To just say that you won’t take on any new business means that you could be turning down something special.

Instead, take a look at the big picture. Then do what’s best for both your business and yourself.

The post FOMOOP (Fear of Missing Out on Projects) appeared first on Speckyboy Web Design Magazine.