Monday, November 20, 2017

What’s New in WordPress 4.9 “Tipton”

With everyone getting excited (on a positive or negative note, depending on who you’re taking to) over Gutenberg launching in WordPress 5.0, it’s easy to forget that WordPress had another major version update that went live in the past week.

WordPress 4.9 officially launched in November, 2017 after a slight delay from the original anticipated launch. Announced on the official WordPress website, developers are calling the update “Tipton” in honor of jazz musician William (“Bill”) Tipton—this jazz-inspired naming mechanism is a long-held tradition when it comes to major WordPress updates.

WordPress 4.9 will be the second major WordPress release of the year, following WordPress version 4.8 “Evans”. Evans promised to be user-centered, and WordPress adds on to this promise thanks to brand new features in Tipton.

Focused on customization, code enhancements, and widget improvements, here’s what you need to know about WordPress 4.9 Tipton:

Enhanced Customization Options

In the name of customization workflow improvements, WordPress 4.9 includes the ability to draft and schedule site design optimizations.

Draft, Schedule, and Share Design Customizations

In previous versions of WordPress, the only built-in way to check on website changes was to publish them to the live version of your site. While not a huge deal when dealing with little tweaks, it certainly wasn’t ideal for making major changes that weren’t ready to be shared just yet.

This new feature in WordPress 4.9 Tipton is just like post revisions, but for theme changes. You can apply changes and store them, then schedule them to go live at a predetermined time and date.

This feature also allows you to share a preview of your changes with anyone—without the need to login. Just copy the preview link and share it with any registered user.

New Theme Browsing Experience

The WordPress 4.9 update also gives users an easier way to preview and change themes directly from the WordPress customizer.

Under ‘Themes’, there are two options:

  • Installed Themes
  • WordPress.org Themes

If you click on the former, you will be given a preview of your installed themes. If you click on the latter, you will be able to browse and search for WordPress.org themes and directly install them from the customizer.

Protect Your Work

Designers that collaborate on a project know how crappy it can feel when a co-designer changes their work without consulting them first. The new WordPress 4.9 update is similar to the Post Locking feature. The design lock feature secures your draft so that no one can change or erase your hard work without going through you first.

Furthermore, if something takes you away from your desk and you forgot to save your design changes, this new version update includes an added security feature where you’ll be asked if you want to save those unsaved changes.

Widget Improvements

Tipton also introduces new widget improvements, including the new Gallery widget. For reference, WordPress 4.8 introduced new media widgets that included rich text, audio, image, and video.

This new widget adds new functionality to that previous update. This new widget can be added to the sidebar, footer, or anywhere you put widgets on your site. To use the new Gallery widget, drag it where you want it to show up and use the ‘Add Images’ button to select images from your media library. Note that this gallery, as with other WordPress widgets, has limited functionality compared with custom coding.

Another widget improvement is the ability to add media to the text widget. The text widget in WordPress 4.8 came with plain text and HTML tabs, but if you wanted to add an image, you still had to use HTML code. WordPress fixed this in the latest version update. This new function also allows you to create a gallery within the text widget.

WordPress 4.9 Tipton now also allows shortcode in text widgets.

New Code Editing

The third major aspect of changes in WordPress 4.9 regards code editing. WordPress code editors used to look and function like plain text boxes but have now been given an upgrade.

Code Syntax Error Highlighter

What’s worse than writing a long code that doesn’t run when you try it out? Not being able to find what’s wrong in that code! It’s frustrating to think that the only reason why your site won’t run correctly is because you missed a semicolon somewhere.

CodeMirror, a syntax checking editor that is focused on editing code, was added to WordPress 4.9. Its features include:

  • Syntax highlighting
  • Live error checking
  • Autocomplete

CodeMirror will be used to edit:

  • Custom CSS in the WordPress Customizer
  • Editing theme or plugin code from the dashboard editor
  • The custom HTML widget

With the new code highlighter feature, users will be able to pinpoint errors quickly. However, early reviews are showing that some users don’t like this feature. The good news if you find yourself among this group? You can simply disable the feature if you don’t like it.

Safety Precautions

Another interesting aspect of the 4.9 Tipton update is that WordPress now warns users that try to edit their theme or plugins directly. WordPress will also warn users that try to edit their themes or plugins for errors before saving (to avoid white screen of death).

What’s New in WordPress 4.9 Tipton

The last of WordPress’ major updates for 2017, these new changes highlight WordPress’ promise to continually provide a user-centered experience.

Don’t forget that unless you’re on a managed WordPress hosting service, you will have to manually initiate the update.

If you’re ready to test WordPress 4.9 Tipton, don’t forget to backup your files before updating.

300+ Beautiful Hand-Drawn Pattern Vectors – only $17!

Source
This content was first posted here:
What’s New in WordPress 4.9 “Tipton”

Sunday, November 19, 2017

Popular Design News of the Week: November 13, 2017 – November 19, 2017

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Site Design: Helen Tran

 

How Dropbox Lost it

 

Firefox Quantum is Available Now – Here’s Why It’s so Damn Speedy

 

20 of the Best Rebrands that Got it Right

 

Web Brutalism: Ugly is the New Black

 

Using SVG as Placeholders – More Image Loading Techniques

 

Gallery of Digital Wonders

 

8 Free Tools for Creating Infographics

 

Plant Version Control for Designers, Officially Available for Everyone

 

The Most Important Rule in UX Design that Everyone Breaks

 

Designing Data-Driven Interfaces

 

iPhone X Web Navigation Concept

 

In the Loop: Apple’s New HQ

 

The Simple Idea that Drives Creativity at Amazon, Airbnb, and Dell

 

What Employers Expect from UX Designers?

 

Cards Against Humanity Saves America

 

Facebook’s Experiments with User Behavior in Serbia

 

Colorglyph

 

Stop Trying to Hide the Damn iPhone X Notch

 

Site Design: Gucci Gifts

 

THE LOOP—a Short Documentary About IBM’s Design Thinking Transformation

 

Jony Ive’s Perfect Magazine is One with no Content

 

Productboard 2.0 – The Product Management Tool for Makers Who Care.

 

Brutalist Web Designers are Breaking Design Standards

 

70s Movie Poster Typography

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

LAST DAY: Create Typographic Images with TypoPainter – only $9!

Source
This content was first posted here:
Popular Design News of the Week: November 13, 2017 – November 19, 2017

Saturday, November 18, 2017

Comics of the Week #415

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…

Cheap jerk

Client from hell

 

Poor communicator

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

60 UI Design Patterns Card Deck – only $39!

Source
This content was first posted here:
Comics of the Week #415

Friday, November 17, 2017

Is Firefox Quantum Really Any Good?

This week, Mozilla launched Firefox 57—aka Quantum—the biggest update to the browser in its 13 year history.

75% of Firefox’s code has been rewritten for Quantum, 5,000,000 lines of code in total. 700 developers, including 80 volunteers, have contributed to the codebase since August. It is, in effect, a brand new browser.

Firefox has always been a cool browser. Open-source credentials and a confirmed underdog status make it the first choice for those who prefer not to use their OS’ default. The latest stats put Firefox’s global share to around 6%, compared to Safari’s (combined MacOS and iOS versions) 15%, and Chrome’s 55%.

Despite much affection for Firefox, there hasn’t been a compelling reason to make the switch, until Firefox Quantum.

Quantum Speed

I don’t recall when a new version of a browser was met with so much excitement, and it’s almost entirely down to one thing, Firefox Quantum goes like a rocket.

Firefox Quantum goes like a rocket

Every browser makes the claim to have improved render speed, usually by a single-digit percentage. Firefox Quantum is twice as fast as the previous version of Firefox. However, that feels like an understatement; Firefox Quantum is perceptibly faster than any other browser on my machine, notably it’s substantially faster than Chrome. Browsing in Firefox Quantum feels like the whole web has been pre-cached.

Mozilla’s own tests found that the beta release of Firefox Quantum was at least as fast as Chrome, but wasn’t substantially faster. They feel they closed the gap on Chrome, without exceeding it. They’re being modest. Anecdotally, my experience in the last couple of days is that Firefox Quantum is substantially faster across the board; it’s possible that I’m simply browsing sites that favor Firefox’s approach, like Google Search for example.

What’s undeniable is that Firefox’s new found speed delivers an enjoyable browsing experience.

Quantum Efficiency

One of the ways Mozilla turbo-charged Firefox Quantum is changing the way it makes use of modern hardware.

Complex software makes use of multiple processor cores by allocating different tasks to different cores to speed up processes. Developing in this way is complex, because if two cores are working on related tasks, one can easily override the other, introducing bugs to the system. This complexity is often solved by ring-fencing tasks, for example, allocating a CSS engine to a single core; less efficient, but more stable.

Firefox Quantum has taken a leap forward by leveraging multiple cores for single tasks, or rather by subdividing tasks into smaller bite-sized chunks so that they can be distributed to more cores.

One of the key components of Firefox Quantum’s speed is the new CSS rendering engine, Stylo. Stylo extends the multi-core approach by allocating different parts of the DOM rendering to different cores.

According to Mozilla, Firefox Quantum uses 30% less memory than “the competition” (aka Chrome) on Windows. Digg’s testing found that Chrome used 40% more RAM and three times more processes than Firefox Quantum.

What’s cool about Firefox Quantum is that the more cores you have, the faster it renders

What’s cool about Firefox Quantum is that the more cores you have, the faster it renders. Firefox is fast now, and it will only get faster in future.

To make Quantum so efficient, Mozilla studied how people actually use the web. As a result, Firefox Quantum prioritizes tasks, for example a button interaction takes priority over something like caching, or garbage collection. This is a direction Mozilla intend to focus on in future releases.

One of the most obvious benefits of prioritizing tasks is tabbing. Firefox Quantum uses less memory for multiple tabs than Chrome. Conducting research, with multiple tabs open, makes Firefox a no-brainer for me.

In Quantum, your active tab is prioritzed over all other tabs, making the best use of resources. Which makes me wonder: Why weren’t browsers doing this before? It’s so obvious.

Mozilla Photon

Firefox Quantum’s UI will probably look a little different to you, especially if you’re upgrading from an earlier version of Firefox. Mozilla have taken a leaf out of Google’s book and developed their own design system for their Products, named Photon. While there’s no suggestion of Mozilla pushing Photon as a cookie-cutter approach to all design problems—as Google have with Material Design—it’s a pleasingly coherent approach that Mozilla previously lacked.

Photon, in Mozilla’s own words, aims to be adaptable, quick, aware, approachable, supportive, and whimsical. Firefox Quantum’s UI ticks all of those boxes.

There’s a greater attention to detail than we’ve seen in earlier versions of Firefox. For example, the nice subtle hover animation on inactive tabs. It all combines to be an enjoyable experience that is happy to fade into the background—which is precisely what a browser should be.

There’s a couple of let-downs. I’m not thrilled that the blank tab has three separate search options: the browser location field, the search field, and the blank page search field. These are minor gripes in an otherwise great product.

The Verdict

There’s no question that Firefox Quantum is going to pick up market share. By this time next year it will have 15% of the market, still less than a third of Chrome’s user-base, but numbers that Opera would kill for.

By any reasonable criteria Firefox Quantum is the best browser currently available

I switched to Firefox Quantum out of curiosity, fully expecting to switch back to Chrome in a few days; Chrome is now gone from my dock, and Firefox is set as my default browser.

Admittedly Firefox Quantum has some extension compatibility issues, but that’s the case for any new browser and developers are already catching up. And I felt an unexpected pang of remorse when I finally bit the bullet and removed Firebug.

By any reasonable criteria Firefox Quantum is the best browser currently available. Whether it remains so depends on the competition, and future Firefox enhancements—all indications are that Mozilla are determined to keep pushing the envelope.

Firefox Quantum is a fast, resource-friendly, intelligently designed product. Browsing in Firefox is simply a more enjoyable experience, what more could you ask?

150+ Christmas & New Year Illustrations, Stickers & Design Elements – only $19!

Source
This content was first posted here:
Is Firefox Quantum Really Any Good?

Thursday, November 16, 2017

How to Design Better CTAs

When you do it right, a call-to-action button will get visual attention. When paired with an offer that is compelling, it actually gets people very eager to act.

The way the CTA button is created, as well as the text used, actually has a very big impact on click-throughs.

The Call-To-Action

What color? What size? Where do I put it? What does it say? Is it converting?

Yes, that’s a lot of questions. And, there are CTAs everywhere, from landing pages to home pages, blog posts, e-mails etc.

The copy used in the CTA is actually just as important as the size, shape, and color of the button itself. And, even a minor change may have a pretty significant impact.

What is a CTA?

A CTA (Call to Action) is usually an image, text, button or video, that contains a link to a page with a compelling offer. Its primary job is to capture the attention of your leads and make them click through, to learn more. You will find that there are two main types of CTAs:

  • The one that sends the visitor to an informational, or product page, where they can either learn about your product(s) or buy them.
  • The one that is part of the Inbound Marketing methodology. Your visitors are sent to a landing page with a form, which, once filled out, lets the users download or sign up for some kind of free offer, like a guide, e-book, coupon code etc.

Things to Understand Regarding CTAs

The call-to-action is the tipping point between bounce and conversion.

When you need someone to do something online, the call-to-action is what they have to go through if they are to do it, regardless of whether it’s clicking through to another page, or buying something.

Important visual cues include, but are not limited to, shape and color. They attract the attention to the placement of the button.

However, when the prospect is at that point where they need to make up their mind, they’re interacting with the copy.

A minor change on the page can have a huge impact on conversion rates.

Making a small change on the button copy is actually a pretty minor change on the page as a whole. However, it has a much bigger impact on the decision-making process of the potential customer, and, as a consequence, the conversion rate.

It is very important to test the variables on your CTA button, regardless of what you’re selling. They are a crucial element of both the landing page, and the conversion funnel, and paying attention to detail makes sense.

Designing CTAs

If you want an effective way to guide the user towards your CTA button, use directional cues.

Regardless of whether it’s obvious methods such as flashy arrows, or something more discrete, like eyes on the page looking at it, just go for it.

When you’re talking shape and design, the button should look like a button. This means that you can go with shading, 3D effects, and subtle gradients, to make it look like something you can click.

  • Size basically tells you that the more noticeable it is, the more likely it is for someone to click it. However, you shouldn’t make a garish, green neon animated button, but it should be easily seen, instead of lost among the other elements on your page.
  • Button color should be contrasting to your background colors. It should be vibrant in a way that it catches attention in the first glance, and the color shouldn’t be used anywhere on the page, if possible.
  • The text will tell you that people buy with emotion, but logic follows it. If you want to encourage impulse shoppers, put a button that conveys urgency. The text should clearly tell what happens if they click the button, and this isn’t the time to be clever, or confusing.

Special Effects

Since not all buttons are made equal, you should know that the CTA button might do a better job if you put some graphical effects that make it interactive. This includes things like:

  • Beveled edges
  • Rounded corners
  • Drop shadows
  • Gradients
  • Arrows, or other small icons
  • PayPal/Credit card logos (to build security and credibility)
  • A hover effect on mouseover

CTA Placement

You’ve heard that the CTA should be above the fold, right? No, wrong. Re-think your CTAs. “The fold” is just a myth.

A higher conversion rate is usually achieved by moving the CTA below the fold. For some more complicated offers, people want to understand things a bit better before they take action.

In such a situation, if you put the CTA above the fold, not many people will even bother to click it. White space is best used for situations when you want to place an attention-grabbing CTA, but don’t put it too far from the main text, it should look connected.

CTA  Microcopy

For a moment, forget about placement. Forget about color. Focus on the CTA copy. There are a few rules for naming the CTA button, and here they are:

  • Don’t be clever – don’t try to re-invent the wheel.
  • Nobody wants to submit. People may want to send a message, post a question or subscribe to a newsletter, but they don’t want to submit.
  • Don’t be verbose, and go with terms people understand easily instead.

Put the Privacy Policy Where the User Can See It

If you want to boost the credibility of your offer, that is.

And, many website owners consider it to be a good practice because it contributes to the overall credibility factor if it’s taken through Google’s manual review. However, it won’t make much of a difference to ranking.

If you think that putting the privacy policy page next to a CTA button is distracting, don’t worry. People seldom click on the privacy policy pages anyways, as they consider them boring.

How to Make Your CTAs More Effective

There are a few small tips that can boost the effectiveness of your CTAs below, make sure to give them a read.

  • CTR is not the end-all, be-all. Both CTR, as well as the conversion rate, are important when analyzing CTAs.
  • Your own CTAs should be tested, and this is crucial.
  • The CTAs can make an incredible difference to the performance of your campaign. A good CTA can boost effectiveness up to a hundred times when compared to a bad CTA.

De-clutter

Everything around your CTA should be clutter free.

Unrelated videos, content, social media buttons, keep all of this as far as possible from the CTA. Only things that can push the offer better are allowed nearby.

Value and Relevance are Important

Why would a small tweak have such a big influence? The answer is in the messaging, actually. “Order” will emphasize things you need to do, instead of things that you’re going to receive.

However, “Get” will tell you what you’re receiving, and not what you have to do to get it. The treatment copy will convey value, but this isn’t always enough.

The button copy should be relevant to the specific conversion scenario, the scenario the prospect is in when he has to click the button.

Wrapping Up

The CTA button has been around for ages. It is an essential part of digital marketing, and will often make the difference in conversion when your user turns into a lead, and a customer later on.

With all the tips and tricks in the article above, you will be able to easily make a smart CTA button.

Coffee and Corporate Stationery Mock-Up Bundle – only $24!

Source
This content was first posted here:
How to Design Better CTAs