Beginner’s Guide: How to Add 301 Redirects to WordPress

Struggling with how to add 301 redirects to WordPress? These nifty redirects are an SEO friendly approach that let you re-route traffic to your site in a number of helpful ways. But they’re also confusing for many casual WordPress users. So, to help you out, I’m going to use this post to dig into 301 redirects as they apply to…. Continue Reading

The post Beginner’s Guide: How to Add 301 Redirects to WordPress is written by Colin Newcomer and appeared first on WPKube.

Comics of the Week #410

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…

Inner developer

Regular client

 

Total package

Can you relate to these situations? Please share your funny stories and comments below…

Source

8 Free WordPress Code Generators, Tools, and Webapps

As WordPress pushes over 25% of the web it’s easily the most popular CMS to date. And that means more developers are building new websites & webapps on the WP ecosystem.

To cut down on dev time you can build on the work of others by reusing code snippets, most of which come from free code generators online. But there are so many other tools built around WordPress that can also help you scale a new WP website.

Below are my personal favorites and I hope there’s something in this list that you haven’t seen before.

1. IncludeWP

Developers often create their own WordPress theme frameworks to save time on larger projects. And sometimes devs even release their frameworks on the web for others to use.

IncludeWP curates all these free WP frameworks in one place so you have easy access to the best templates for plugin and theme development.

Everything on this site is totally free and open source each with a GitHub page. You can sort the list by most stars or forks on GitHub, or sort alphabetically if you’re looking for something specific.

But if you just wanna browse through WP frameworks this site is the best to see what’s out there.

2. WP Hasty

I recently stumbled onto WP Hasty and have to say it’s one of the easiest code generators to use.

It’s designed solely for WordPress and offers different generators for different snippets. Currently it has 8 different code generators for things like shortcodes, custom post types, taxonomies and even WP_Query() loops.

When you click on any generator you’re taken to a new page with a GUI for editing the options. You can input whatever features you want and the code generator automagically creates the snippet for you.

WP Hasty is one of the most comprehensive generators you’ll find and it lets you customize every possible option with an easy-to-use interface.

3. Addendio

Testing a WordPress plugin isn’t always easy. You’ll need to either run it on a live website, or setup a local demo site and test it there.

But with Addendio you can test free WordPress plugins right from your browser. This webapp lets you search through 60,000 plugins all hosted in the WordPress plugins directory.

From there you can run a free sandbox for testing the plugin right on the Addendio website. This gives you access to a temporary WordPress install without any setup work.

Just note this does require an email address to launch the demo but it’s one of the fastest ways to play with any plugin in just a few clicks.

4. What WP Theme Is That?

Trying to figure out which theme your favorite blog is using? Check out What WP Theme Is That designed for this exact purpose.

It actually pulls extra data on plugins too so you can spy on both themes and plugins.

Many sites run their own custom themes and in this case you’ll get a message with the theme’s folder name stating it’s not using any recognizable free or premium theme. Otherwise you’ll see a full theme preview thumbnail along with a link on where to get it.

Same goes for plugins so if you’re trying to break down a WP blog’s setup this tool is quite handy.

5. VersionPress

If you develop a lot of projects then version control is an invaluable tool. Most developers use Git but the concept of version control is useful regardless of software choice.

The free VersionPress plugin is a great example. It’s designed specifically for WordPress websites and while it runs on Git, it still operates as a separate platform in WordPress.

You can manage all changes to your WordPress website and commit these changes to individual “snapshots” for archiving. It makes development so much easier because you can quickly roll back to earlier versions of your site without needing to back up everything.

Getting this plugin setup & working properly may take some time if you’re new to version control. But it’s one of the best tools for managing a complex WordPress project and fixing simple coding errors.

6. GenerateWP

Here’s one other code generator that I’m quite fond of alongside WP Hasty.

The GenerateWP site has been around for years and they’re constantly adding new features. It does offer a little more than WP Hasty so you’ll find generators for admin functions, custom query functions, and even core edits like registering hooks or editing your wp-config.php file.

There’s so much you can do with this site and it offers a nice mixture of code generators along with free code snippets.

Unfortunately some of the generators are premium-only which gives this a big disadvantage to WP Hasty. But you can still use a total of ~25 free generators without paying a penny or even creating an account.

Worth bookmarking if you’ll use it but be on the lookout for other generators too.

7. Admin Account Generator

This is a real simple tool that many devs may not use often, but when it’s needed it certainly helps.

Exygy’s Admin Account Generator automates the SQL code necessary for overwriting the main admin account. There is no simple way to do this from WordPress and you can’t delete the main admin without running SQL code, so the easiest thing to do is overwrite those settings.

With this tool you just input the username/password info you want to use along with your database name and whatever new admin email/display name you want.

It’ll automate the final query so you can just copy/paste and run it over your database for a brand new admin account.

8. You Might Not Need That WP Plugin

One of the best things about WordPress is the massive plugin library with so many cool add-ons at the click of a button.

Yet if you run too many plugins it can slow down your admin panel or even your website. That’s why I’m a big fan of this free site that lists all the features you can add without using a plugin.

Things like custom post types and related posts all have their own plugins and many non-dev users prefer those options. But this site offers code snippets that you can copy/paste into your functions.php file to get the same effect.

If you’re trying to slim down your plugin use, this site is a goldmine of resources.

Source

How to Fix Broken Links Using the Broken Link Checker WordPress Plugin

When you website has a broken link, meaning the link to the content is not working, it typically displays a 404 Error to your website visitors. This can happen because old links are no longer good, something went wrong when you connected the content to the link, or the page you are linking to simply doesn’t exist anymore. Broken links…. Continue Reading

The post How to Fix Broken Links Using the Broken Link Checker WordPress Plugin is written by Lindsay Liedke and appeared first on WPKube.

Gain Greater User Insight with Hotjar’s Incoming Feedback​

It doesn’t matter how great a designer you are, without feedback from your visitors, anything you design will only ever be an educated guess. Great feedback enables you to design real solutions to actual problems in an iterative fashion.

It goes without saying that the better your feedback, the better the design that results from it. That’s why over 200,000 companies, from startups to Fortune 500 companies, use Hotjar to grab feedback from users.

Hotjar’s latest innovation is Incoming Feedback. Incoming Feedback delivers instant visual feedback for your website, or app; it helps you develop a better user experience, by revealing what your users love, and hate.

Incoming Feedback sits like a tab at the edge of your screen. You can customise the position, color, flow, and message of the widget in your Hotjar settings. When a user clicks to submit feedback a pop-up appears allowing them to choose from five options: hate, dislike, neutral, like, and love. Once the user has picked an option, they can then choose to add a comment about their experience.

One of the best features is that when a user is submitting feedback, they can use the optional area selection tool to highlight an element on your page; you’ll know exactly what content they’re loving or hating.

Incoming Feedback allows your visitors to send you feedback in just 2 clicks, with the optional screen shot for context. The ease of sharing their feelings significantly increases the chance of users doing so—yes, they could email you, but most disgruntled users would rather bad mouth you on social media—incoming feedback means that not only will the feedback get to you, but only you will get it.

For greater insights, you can combine Incoming Feedback with Hotjar Session Recordings, or Hotjar Polls so you can understand user feedback in the context of their personal journeys. Performance tracking lets you analyse your progress over time, celebrate your victories, and uncover where you have room for improvement. Tracking progress across your entire site helps you monitor your whole output, and identify opportunities for growth.

So far, over 2.4 million people have shared feedback via Incoming Feedback with household names from Nintendo, to Microsoft, to Intuit. You can join them by signing up for a Hotjar account today.

 

[– This is a sponsored post on behalf of Hotjar –]

Source

4 Things Every Designer Should Know About Whitespace

Whitespace (or “negative space”) is an empty space between and around objects of a page. Elements of whitespace in graphical user interfaces are:

  • Margins, paddings, and gutters
  • Space around images and graphic objects
  • Line-spacing and letter-spacing within text content

Although some people may consider whitespace a waste of valuable screen estate, it’s an essential element in a design. In fact, whitespace is just as important as the content. As Jan Tschichold said:

Whitespace is to be regarded as an active element, not a passive background

All good user interfaces incorporate proper whitespace values into all page elements from top to bottom. The whitespace on a page can be every bit as important as the space occupied by UI elements because text, buttons, logos and other objects need room to breathe.

In this article, you’ll find how to use whitespace in your designs to give it a clean, uncluttered feel:

1. Improve Text Readability

Whitespace is able to make reading much easier by reducing the amount of text visitors see all at once. The lack of whitespace (cluttered page) doesn’t make users want to read the content. On the other hand, properly used whitespace has been proven to increase text comprehension up to 20%, as pointed out by Dmitry Fadeyev.

Two important things to keep in mind when optimising your text content are paragraph margins and line spacing (the space between each line in your text). The latter can drastically improve the legibility of a body of text. Generally, the larger the spacing, the better experience the user will have whilst reading (although too much line spacing can make the lines disconnected).

2. Clarifying Relationships

The whole layout arises from the sum of its parts and content relationships are defined by surrounding whitespace. The Law of Proximity states that objects near to each other appear similar. The whitespace acts as a visual cue in this case. Take a look at the image below:

The laws of Gestalt dictate that objects in close proximity will appear as one “unit”; the white space acts as a visual cue.

Almost everyone who sees this image notices two groups of circles, rather than simply 12 circles. The circles are all identical and the only difference between them is the amount of whitespace that separates them.

It’s possible to group items together by decreasing the space between them and increasing the space between them and other elements on the page.

For user interfaces, this means that objects in close proximity will appear as one “unit.” For example, in the context of web forms, it’s a good idea to place labels close to the relevant fields to create an object. When labels are placed closer to the fields this makes the relationship between them much clear for users.

Information is communicated far more clearly when labels are placed closer to the fields they relate to.

3. Attracting Attention

Designers can use whitespace to communicate what’s most important at a glance. There’s a relationship between a distance and attention; larger distance forces attention. The lack of other elements will only make existing elements stand out more. It’s possible to use a whitespace for your advantage—to draw wandering eyes onto certain page elements. Extra padding around a particular segment of content forces users’ attention onto that area simply because there’s nothing else on the screen to draw attention. Thus, the more whitespace around an object, the more the eye is drawn to it.

4. Create Visual Hierarchy

When whitespace is used appropriately, it allows a page to create a general flow and balance, which in turn helps communicate the intent of the design. Whitespace can support the overall hierarchy. It produces either symmetry or asymmetry.

Symmetry creates memory and harmony:

Mailchimp, as you can see, is a big advocate of white space in their designs. When visitors scan the homepage, the “Sign Up Free” button draws their attention almost immediately. Using symmetry it’s possible to create a balanced layout with equally important right and left parts.

While asymmetry draws attention:

Asymmetry is great for bringing attention to a particular area of the page.

When an element uses asymmetrical space, it stands out against other surrounding elements.

Conclusion

Whitespace isn’t a wasted space, it’s a powerful design tool. It can be every bit as important as the space occupied by imagery, text or other user interfaces object because even empty space serves a purpose and supports the visual integrity of a layout.

Although it seems a simple topic, whitespace can be hard to master because the application of whitespace is both art and science. Truly understanding how much whitespace should be used to create a good layout requires practice.

Source

Dropbox Unveils Brave New Brand Identity

Dropbox has launched a controversial redesign of its brand identity, intended to help the SaaS standout in a market increasingly packed with pretenders to its throne.

What they’ve unveiled seems certain to split opinion. On the one hand, the previous identity was business-like and sat comfortably alongside other tools in your GUI; on the other hand, that identity is tied to a business model that Dropbox, it seems, no longer aspires to:

As our mission has evolved from keeping files in sync to helping teams in sync, we realized our brand needs to change, too. Our new brand system shows that Dropbox isn’t just a place to store your files—it’s a living workspace that brings teams and ideas together.

This isn’t a brand design, so much as a brand repurposing.

Redefining the Logomark

The “open box” logo mark was the most recognizable of Dropbox’s brand assets, and fortunately they’ve had the good sense to retain it.

In fact, you’d be forgiven for thinking that they haven’t changed the logomark at all—other than the fact that someone’s run it through a Warhol-inspired Snapchat filter. However, what has changed is the rationale: Dropbox no longer see this as a box—which would imply storage—but rather as a series of surfaces—which implies open collaboration and creativity, apparently.

For those who still see the box, there’s a helpful animated logomark that tries to undermine the original’s 3D qualities. For most people, the original icon, with the original meaning, will still shine through.

 

Sharp Grotesk

The revised branding includes a custom typeface, loosely derived from the old logotype, named “Sharp Grotesk”.

As a display type, Sharp Grotesk is full of contradictions. A large x-height and counters on some characters enhance readability, whilst very tight counters on others limit it. In weightier fonts the typeface feels distorted to the point that it could almost be monospaced, but in regular weights, especially when sized around 16pt, it’s perfectly readable and still retains enough quirks to keep its character.

You have to take your hat off to Dropbox for rejecting the obvious geometric sans direction that seemingly every corporation has adopted in the last couple of years. They’ve gone for broke, and even if Sharp Grotesk isn’t a triumph, it’s undeniably theirs.

Disposable Color Pairs

Dropbox made the new brand direction public on their dropbox.design site. There are dozens of color pairings on show, with the implication that hundreds more are possible. In this context they are plain ugly but in isolation, with just two colors at a time, the pairings illustrate Dropbox’s central theme, of two different, but equal forces collaborating.

You get the impression the color options were put together with real joy, and that no one at Dropbox is married to any individual pairing; they’re just having fun with highly disposable options.

It’s also important to note that Dropbox Blue isn’t going anywhere. In the app the same blue you’re used to won’t be replaced by neon purple anytime soon. The new combinations are strictly for marketing.

Ugly But Brave

The inspiration behind Dropbox’s new brand identity is that we work better together. Dropbox is no longer for storing photos, or even sharing files, it’s a place to be collaborative and creative. To embody that, they’ve given their design team the freedom to be brave.

We want to [build] a brand that help[s] people focus on meaningful work, instead of busywork. And we want to inspire creative energy, instead of taking it away.

We have to give the Dropbox design team credit. They had every opportunity to play it safe, churn out something derived from Flat Design, and cash their paychecks. Instead they chose to strike out in a direction most designers would not have opted for. We can’t complain about the homogenization of design, and then act horrified when someone takes a creative risk.

Source

Pearl Theme Review: A “Multi-Niche” Business WordPress Theme

Pearl is a multipurpose business WordPress theme with a variety of different niche-focused demos. Each demo not only features a different design style, but also different functionality and modules that are specific to each niche. What’s more, the pre-built demos actually look good. I’m a fan of the design aesthetic that the Pearl team used. Beyond that, it also includes…. Continue Reading

The post Pearl Theme Review: A “Multi-Niche” Business WordPress Theme is written by Colin Newcomer and appeared first on WPKube.

Ultimate UX Design Guide to SaaS On-Boarding, Part 2: Welcome Email

SaaS customer onboarding is the process that users have to experience while initiating their journey as a customer on a company’s software application. Customer onboarding comes from the experience that employees previously had to undergo while joining a firm.

The onboarding process sets the tone for a good user experience. Long story short, special emphasis should be given to make the on-boarding process as flawless as possible.

The SaaS customer on-boarding process is based on 6 comprehensive aspects:

  1. Sign up form
  2. Welcome email
  3. Drip campaigns
  4. First login & product tutorial
  5. Data import & notifications
  6. Check up calls & swag

All the aspects of the process play an equally important part in forming a desirable reputation of the brand in the eyes of the customers during the on-boarding process. Last time we discussed the first step to the on-boarding process, the sign up forms. Today we will be focusing on the welcome email.

A welcome email is a critical component of the signup process. It is the first time you are getting directly in touch with your customer and, therefore, is key to creating and building up momentum of the signup process to the point of using your product. ReturnPath conducted a research study, which revealed that:

There was a strong correlation between good welcome messages / emails and user engagement. Moreover, good welcome messages are an important predictor of user behaviour and potential revenue in the long run.

A welcome email is the point where you can quickly communicate the value of your product and can make or break a conversion. The email can contain a lot of things you would want your customer to know, and therein lies the risk. Bombarding the customer with too much information can be a conversion killer.

Summing Up: The Point of the Welcome Email

  1. Build signup momentum
  2. Get users to take the next step (not reach the end goal)
  3. Give them an idea of what the experience of your product is going to be like

Any welcome email needs to be drafted with a specific purpose in mind (apart from just a greeting). The following are examples of specific goals that you could keep in mind:

  1. Getting the user to complete their profile
  2. Getting them to “create their first <whatever your product offers>”
  3. Getting them to “import data”
  4. Getting them to “download your app”

Keep in mind that the rate at which your welcome email is opened and the CTA is clicked on, is not a measure of how successful it is in achieving its purpose. Adjusting the subject of the email and optimising the body can be helpful measures, but the true objective over here is to ensure that your customers are moving through the steps of your on-boarding flow. So the real measure of success is the rate of conversion.

How many customers responded to your CTA?

Drafting the Email: Things to Keep in Mind

  1. Simplicity: Like we said, you probably want to let your user know about a bunch of things. But don’t let them know it all at once! Let them spend some time using your product so that they can get acquainted.
  2. Resources: Give your users some additional links or resources that help them engage better with your product.
  3. Thanking them: You can choose any way to express your gratitude. It could be simply thanking them or telling them that you’re excited that they’ve signed up for you.
  4. Actionable: As mentioned above, there should be clarity in the content of the email; it should have relevant information and, above all, it should be actionable. It should be clear to the user what you want them to do, now that they’ve received and opened the email.

Check out the following welcome emails by well-known SaaS companies:

Zapier

Zapier’s welcome email is an excellent example. It’s simple; users are being told what the application does, along with a link to user examples. Conditions of the trial period are clearly mentioned. Additional resources, such as the help documentation are mentioned clearly. The email starts with a thank you of sorts, because Zapier is excited to have the user on board. The next step Zapier wants the user to take is developing a profile, which makes the email actionable.

Zapier welcome email screenshot

InVision

Users who are signing up for InVision’s prototyping application receive a welcome email that is crystal clear in terms of what it wants to achieve: Get the user to start using the app. Hence the email is clearly actionable.

In order to help with that, users don’t get a list of things they need to do to start using the app. Users get to see some quick videos in succession to understand what they need to do. Considering that the app is highly interactive and visually appealing, the nature of the email coincides well with the nature of the product.

The email is simple in its content, it links users to videos which are excellent resources to quickly understand and engage with the product. There’s admittedly no thank you, but that is more than compensated by the simplicity of the email.

InVisionApp welcome email screenshot

Basecamp

Basecamp’s welcome email is simple and not long at all, with a clear welcome message along with a thank you for signing up. There’s proof given in the form of mentioning how many organisations use the product. There’s a clear link for downloading the app for Android or iPhone, which serves as a resource for users to better engage with the product. The purpose behind the email is clear, i.e. logging in to your account. Hence the email is actionable.

Basecamp’s welcome email screenshot

Convertize

After signing up with Convertize you will receive a straight-forward, simple welcome email from the CEO, in which he will thank you for signing up in the first sentence. Then, throughout the email, there are actionable questions prompting you to reply directly to the CEO, and respond with the reason why you signed up. This highlights their appreciation for every single user. Convertize thus shows that they care about your feedback. At the very end, they also give you a link to their promotional video as a resource, it makes the platform come alive, creating a more human emotional connection. In the long run, this helps build a strong engagement with the product.

Convertize’s welcome email screenshot

Conclusion

As the saying goes, the first impression is the last impression over here. In customer on-boarding, the success of the signup flow heavily hinges on the initial points of interaction between you and your customer. The level of customer engagement can be imagined in terms of an exponential curve.

Successfully designing each point of the customer on-boarding flow ensures that the customer’s engagement with your company increases exponentially after each point. The customers that your business will get will be happier ones. There is a higher probability of them being able to understand, value and like what you have to offer. And if the first impression is thoughtfully and skilfully designed, it has the potential to develop customers that will be long term.

 

Source

3 Essential Design Trends, October 2017

Every designer loves breaking the rules every now and then. This month’s web design trends highlight some of the rebellious spirit in ways that look amazing.

The key to all these rule-breaking designs is that the rest of the interface is simple and actually follows the rules. From text that doesn’t stay in its “container” to oversized design elements to odd ball geometric shapes, let’s walk on the wild side…

Here’s what’s trending in design this month:

1. Text Without Boundaries

There was a time that every element in a website design had its own place. That’s not always the case anymore.

More designs are allowing elements to cross planes and move into the space of other elements. It sounds like one of those ideas that could go horribly wrong (and it could), but these websites show that there’s something beautiful about text that lives in two spaces at the same time.

there’s something beautiful about text that lives in two spaces at the same time

The trend is exemplified by text elements that cross into multiple containers, such as text that layers over the background and an image. It can also apply to lettering that layers partially over two different boxes, such as Tradewinds.

It can work with typography of any size and shape and images or video. The one consistent theme is that text elements must have a lot of contrast with background elements so that every letter remains readable. You can see from the examples below that lettering doesn’t have to stop between words; it can be broken up vertically or horizontally.

The big idea behind this treatment is to draw the user into the page with something totally unexpected. This style of lettering does that.

To make it work, treat the text element as a separate layer over background and image layers. Text should always be the uppermost item to help ensure readability. Stick to typefaces that are sharp and easy to read. Simplicity in the rest of the design is key to making this technique work.

2. Larger Than Life Objects

Oversized design elements are nothing new. But more designs are taking everyday elements and showcasing them in larger than life styles to grab the attention of users.

It’s a fun technique that requires a lot of detail for the imagery involved.

It’s also takes the right kind of image—and an excellent eye for cropping—to make this work.

Look at the examples below. If someone had told you the screen would be filled with half a pair of glasses, a faceless moustache or a single video of an eye would you have imagined the striking success of these concepts? Each is a great example of rule-breaking in a way that’s totally unexpected, original and contributes to the messaging of the brand and overall design.

The thing that is challenging about oversized and larger than life design elements is creating balance. Large objects need plenty of space and balancing elements so that the design doesn’t feel odd or jarring. Westward Leaning does this with plenty of whitespace around the eyeglasses image; Famoustache uses bright color and fun typography to offset a “floating,” animated moustache; DTSi uses large text and geometric shape layers to soften the eye video.

The key to making a larger than life element work is quality. Images and video have to be top resolution. Oversized elements are not forgiving if they aren’t sharp and perfectly in focus. You’ll need high-resolution video, or photos and vector elements for this technique. Even the lighting and composition of something as simple as a pair of glasses has to be perfectly thought out so that it doesn’t feel off to the user on the screen.

Highly-detailed images such as this are nice for providing information to users—especially for ecommerce where users can almost “touch” the object—but it can be tricky to do well.

3. Hollow Shapes

Designers have fallen in love with geometric shapes this year. From shape overlays to polygon patterns, this monthly feature has centered on shapes a few times. And now designers are trying something else new with them, hollowed out shapes.

For logos, icons and geometric displays, hollow shapes are an interesting design element. Generally, they are quite simple in nature, such as the hollow geometry used by Bruderl, but can also take on more complex roles such as the icons for Borderfree, which contain more detail.

hollow shapes are fun because they can be used in space to create a focal point

Either way hollow shapes are fun because they can be used in space to create a focal point, as an overlay on an image or as part of a company logo or branding, or two create a set of visuals that have a consistent feel throughout a design project.

To make the most of hollow shapes, create something that has a thick enough stroke that it can stand up on top of different backgrounds and different types of coloring. While you can create your own funky shape, such as some of those below, you can also use common elements to outline.

What makes hollow shapes work is visual interest or identification, meaning the shape has to be really unusual or completely clear to grab the attention of a user. Consider a combination of hollow areas balanced with some fill, such as Cwart, to create contrast and more interest.

The most difficult part of using a hollow shape design is that they can often feel too light and get lost in proximity to other design elements. The shape has to be clear enough, larger enough and have thick enough lines to convey meaning at every size users encounter it.

Conclusion

Design rules exist as a starting point for creation. While you don’t want to get in the habit of ignoring these guidelines—you can end up with a design disaster—breaking a rule here and there can help you create something special.

Just remember to use this idea sparingly and understand that it won’t work for every project. What do you think of these rule-breaking trends? Would you try them? Hit me up on Twitter and let me know.

Source