12 Ways to Design the Perfect Site Navigation

Header navigation menus can often be overlooked when it comes to inventive and creative web design. But as the primary way users explore and interact with your website, investing in engaging header navigation means site visitors spend more time on your site and end up seeing much more than just your landing page. There’s no point having brilliant web design on your inner pages if your header doesn’t make it easy (and fun) to click through to it.

So we’ve put together a roundup of websites which have made the most of their navigation menus with beautiful, sleek, and innovative design. Take a look below and get inspired!

1. Sistrix

Sistrix is the German company behind popular SEO software package Sistrix Toolbox. As such, their website (including their popular SEO news blog) gets regular traffic from digital experts. When that’s your target market, there isn’t much room for sloppiness when it comes to web design.

Keeping things sleek and stylish, the Sistrix navigation menu is comprised of four simple drop down menus: Toolbox, Blog, Resources and Support. Hovering over each header reveals a list of relevant links, each represented by a simple icon. This is a particularly smart idea when your website has as many pages as Sistrix’s has.

Just showing a block of text can be overwhelming when trying to navigate through a big website, but these well-designed icons quickly direct the visitor to where they need to go. Looking for help with mobile SEO? A simple smartphone icon draws the eye and gets you there much quicker. Streamlining the user experience for site visitors is one of the main functions of a good navigation header, and this is something the Sistrix site nails.

2. Supple

One of the key services offered by Australian digital marketing company Supple is their web design makeovers. This means that having a good navigation menu on their own is as much about demonstrating their design prowess as it is about helping visitors navigate their services. One of the key things that helps Supple’s header navigation stand out is the simple, yet eye-catching, use of animation and colour.

For example, their phone number is represented with a colourful animation that cycles between orange and black text. Beyond simply helping site visitors know what number to dial to get in touch, it adds a dynamic flair to the navigation menu.

Other eye-catching uses of animation is the hover effect on the navigation menu to expand the text like what >> what we do, how >> how we do it, etc. It’s small touches like this which make navigating the site fun, meaning visitors are likely to spend more time browsing through multiple pages.

3. Reiss 

When you’re a fashion brand, it’s smart to show off your latest designs as much as possible. While many drop-down navigation menus are purely text-based, UK fashion brand Reiss highlights their New Arrivals catalogue using images in the drop-downs for womenswear and menswear, two of their core product categories. It helps that they’ve invested in high-quality photography—with pictures that look this great, why not incorporate them as a key part of the navigation experience?

4. Vibrains

Vibrains is a portfolio for Emiliano Borzelli, a front end developer. When it comes to the site, it’s truly out of this world. Picking a clear design motif like ‘space’ gives a cohesive look to the whole site. Everything from the logo design to the key info icons utilise space imagery. A simply animated banner makes browsing the site feel like floating in outer space, but the absolute standout design feature is a fully animated animation of the solar system when you jump into the process section. 

With to-scale representations of our neighboring planets, it evokes the childlike fascination people have with space to keep visitors engaged with navigating through the site. If you’re as obsessed with this animation as we are, you’ll be glad to hear we tracked down the open source code for it on CodePen here!

5. Weecom 

Brazil-based digital agency Weecom utilise a hamburger-menu button to keep their homepage looking sleek and minimalist, with navigation options only popping up as you hover over the icon. It’s a pretty standard approach to navigation headers, but what we love about Weecom’s site is how scrolling down the page causes the hamburger icon to switch from top-left to bottom-right. It’s a simple, dynamic touch that proves how important it is to use navigation menus that work around the main content of the page.

6. Mashable

When you’re a content nexus like Mashable, it can be a tall order displaying all your content in a conventional navigation menu. Headings, subheadings, sub-subheadings—making sure you have clarity is key to providing a good user experience for your site visitors.

That’s where their mega-menu comes in. Once you hover over the ‘More’ tab a drop-down menu spanning the entire length of your screen becomes visible. This provides the space to include a series of columns—like ‘Channels’ or ‘Company’—under which your list of subheadings can be displayed. If you’re designing a site that’s hosting a lot of content, considering a mega-menu like this one is a strategic way to handle navigation.

7. Oars

Another example of a mega-menu, travel service Oars uses a clear navigation layout to help you find what you want. For example, hovering over Destinations showcases a mega-menu divided up into Oars’ local United States destinations, International destinations, National Parks and Rivers.

Another great addition to the mega-menu design is the use of images under Your Experience, Stories+Video and Plan+Reserve headers. Making the most of the space they have, these eye-catching image panels engage site visitors and encourage click-through.

8. Paper Collective

Specializing in stunning art prints for the home or office, it’s clear Paper Collective has an eye for good design. Accordingly, they’ve made clever use of a slide-out sidebar menu—meaning that navigating their site never obscures their homepage product images, but shifts them slightly to the right instead.

9. Olympics

Maybe we’re design nerds, but one of our favourite parts about the Olympic Games is seeing the logo designs each host city comes up with. Completely individual to the culture and design sensibilities of the time, they’re a great way to look back on past Games. 

This is something the navigation menu design for the IOC homepage seems mindful of—as you hover over the main ‘Olympic Games’ header each Olympic Games is represented alongside its specific logo. Laid out in a simple, streamlined way that makes navigation by chronology easy, this site sets a gold-standard for good menu design.

10. Next Stop

Next is a UK brand that sells everything from clothes to shoes, to flower arrangements, to furniture. As such, their navigation menu has to do a lot of heavy-lifting to display their comprehensive catalogue of products. One of the techniques they use is accordion tabs—when you hover over their Home & Furniture header you’ll see a sub-menu of tabs you can click through to see links for bedroom furniture, kitchen fittings and more! If your company has a wide range of products online, this method of dividing up headings, subheadings and sub-subheadings is a fantastic way to go.

11. ESPN

Smart navigation design means knowing what people are looking for and displaying that as easily as possible. For sporting media empire ESPN, most of their customer base are looking for one thing: the score.

With a keen awareness of this, ESPN has made the smart decision to display a Top Events navigation menu above their standard menu, giving quickview results for the latest scores in the most popular games. In combination with the standard menu (which utilises team logos under NBA, NFL, AFL, NRL & Cricket headers for easy browsing) it’s design that’s directly informed by how and why people use the ESPN site.

12. Bentley

Bentley is a brand which is held in high regard for their sleek car designs and, so it would seem, sleek web design too. A clever layout has made navigating the Bentley site a joy. Clicking the Models header in the top menu causes a sidebar to appear. As you hover over each car model range, you’re given a stylish sideview of the individual models on offer.

With a reputation for beautiful cars, it’s no surprise high-quality images feature so heavily in the Bentley navigation menu. It’s a lesson we can all learn when it comes to web design: if you’ve got it, flaunt it!

 

Source

5 Ways to Design for Customers and Search Engines

Business owners and web designers are pulled in many different directions when determining what features and content they should add to their website. Variables like site colors, button designs, animations, copy and messaging, user flow, search engine optimization, fonts, photos and video, page performance and more all play a role in how an overall design and user experience come together.

Of the variables mentioned—and there are certainly some that were left out—SEO is probably the most heavily weighted as most businesses want to be at the top of search results for their industry.

…by designing your site for Google, and not for your customers, you are actually hurting your rankings, not helping them.

However, designing for search engines can mean sacrificing too much of the user experience for the sake of appeasing the robots that crawl your site and determine ranking on SERPs (Search Engine Results Pages). This, in turn, will cause visitors to spend less time on your site, or to leave the site before performing an action such as submitting a lead form.

Ironically enough, search engines like Google then factor in metrics like session duration, bounce rate, and average pages per session to determine whether your website is worth ranking. In other words, by designing your site for Google, and not for your customers, you are actually hurting your rankings, not helping them.

You should, instead, design your website with your customer in mind.

1. Start with User Experience

Start by asking yourself a couple of questions regarding the user experience (UX). For example, why do I want customers to visit my site? Am I trying to sell them something directly on my website, or am I trying to entice them to contact my business or sign up for a newsletter? Do I want them to visit various webpages on my site in a certain order (i.e. the home page, about page, services page and contact page) or am I simply wanting readers to visit blog articles?

How you answer these questions will determine how you create your user flow. You want to start with the first page in the user’s journey (i.e. the Home page), then connect pages within the user experience that ultimately lead a visitor to the final goal (i.e. submitting a contact form or making a purchase).

Once you have determined how visitors flow throughout your site, you’ll want to make sure that the copy, or site text, contains subject matter that is concise and informative, with keywords your visitors are searching for prior to landing on your site.

Do not keyword stuff, as readers will find this sort of copy very annoying and search engines will penalize you for such a style of writing.

You’ll also want to make sure that your copy uses proper grammar, and is easily readable (i.e. doesn’t use super long sentences or big words).

Finally, you want titles that describe the main points of the text so that visitors can skim through the copy to find what they are looking for.

2. Always Properly Manage Images on Your Site

Within the various paragraphs of text, you’ll want to link users to the next page or product that is a continuation of the copy. And, you’ll want the link—which is the next step in the user flow—to be as obvious as possible, such as a nice big button right under the last paragraph of text.

For example, if you write a paragraph talking about how great your organic men’s t-shirts are, link that paragraph to your Men’s Organic T’s products so that customers are taken to the next stage in the purchase funnel. In this scenario, it may be helpful to have the button read “Click Here to Buy Organic Tees” or to just have a picture of the product and a button within the picture (sort of like the format for a Google Display ad).

It also helps to include images alongside your paragraphs that represent the subject matter within the corresponding text, even if the images aren’t linked (though they should be). Just be sure to compress and/or resize your images beforehand in a photo editing software like Photoshop or GIMP to maintain faster page loading speeds. Larger images slow down your site as they are larger in file size.

Plus, be sure to add a title to your image so that the Google crawl bots know what is in the image. Google’s bots can’t see images but Google loves recommending images to people in search results, so Titles and Meta-tags with relative keywords are the way they can “see” what’s in your image.

Finally, be sure to look up how to save your images in “Progressive” format, as this helps speed up the loading process of larger images on your site. Proper management of images on your site appeases both website visitors and search engines alike.

3. Make Sure Your Website Focuses on a Niche

Make sure that everything important on your site is accessible within 3 clicks.

The key thing to remember at all stages of your web design is that people are looking for something specific when landing on your site, and are wanting to obtain that specific thing as fast as they can without having to be on your site too long or having to visit too many sites.

Your site should be centered around a specific thing or niche so that customers or visitors will know they have landed on the right site immediately. In other words, you are attracting a very specific type of site visitor with a higher chance of performing an action when they land on your site.

Once they have recognized that your site has what they want, you must make it easier for visitors to obtain the item they came for. This means not making your visitors navigate to 5 different pages to finally land where they were wanting to land or find what they were after. In other words don’t bury the lead! This keeps visitors from getting frustrated and giving up, thus exiting your site and increasing your bounce rates or exit percentages.

4. Keep Your Site Secure

People usually rate security as one of the most important factors when visiting someone’s site and deciding on a service. If your site is extremely slow, looks outdated, and doesn’t have any indication that it is secure, it will turn away visitors faster than the pages can load.

However, if your site uses an SSL Certificate to secure the transfer of information between customers and the site, you’ll immediately make visitors feel more secure and thus increase your chances of a conversion.

Some websites go so far as to add a logo of the type of security certificates or software they use to add more security to something like, for example, a checkout page on an eCommerce site. Surprisingly, this has been proven to comfort customers during the checkout process.

It should be noted that you should only add the logo of the security programs you are implementing, as adding a logo of a program you don’t use to create the illusion of security is highly illegal.

5. Offer What Visitors Want

In the end, it comes down to whether or not your site has something to offer its visitors. This is why so many marketing companies talk about the importance of good and consistent content. Think of content in a variety of ways – it can be blogs, videos, new products, or new images.

These things should be continuously added or enhanced throughout your site. Your website and web design should consistently be getting better each day.

Additionally, good content should be matched with a high-performance, easy-to-navigate site that delivers what they need fast and in an aesthetically pleasing way. Add to that the comfort of security, and you’ve got yourself a site that will not only perform well for visitors, but also for search engines.

Source

20 Best New Portfolio Sites, November 2017

There are basically two kinds of portfolio websites nowadays: those with asymmetrical layouts, and those with background images that change when you hover over the name of a project. At least, that’s kind of how it feels this month.

Now, these are not bad-looking sites by any means. There are just a lot of them. I thought we might be done with the bandwagons for a while; but they’ve come back with a vengeance.

I’ve tried to minimize the number of sites in this month’s lineup that look almost exactly the same. Even so, we’re going to see a lot of minimalism, post-minimalism, and asymmetry. Enjoy!

The Great Agency

The Great Agency (which sometimes also calls itself “Alexander the Great”) could teach us all a thing or two about animation. While not every brand will want to use this much animation, it all feels smooth and fluid; it compliments the rest of the site’s visuals nicely.

Daniel Arsham

On the down-side, Daniel Arsham’s site could be a little confusing at first, with unconventional navigation, and a screen-saver (Remember those?) that pops up a little two fast.

One the other hand, it’s a whole new concept. It’s actually kind of cool to watch the whole page split in two to reveal a bit of the project underneath. Take a look at this one for ideas. And maybe implement them with better usability.

stillcouldbeworse

The oh-so-confidently named stillcouldbeworse brings us a nice little dark website with what might be one of my new favorite navigation patterns. Click on “Projects” to see what I mean.

Okay, it wouldn’t work for site where vertical space is at a premium, but I still think it’s cool. The overall style of the site feels a bit ’90s, but has a clearly modern implementation.

7D8

7D8 has adopted minimalism to the point of near-brutalism. A bit more grey and mono-spaced type, and they’d go right over the edge. As it is, it’s just highly stylized minimalism, and it’s looking good. I’m still not sure about that “four corners” navigation that some sites do; but I’m willing to say that 7D8 makes it work.

Brave New World

Brave New World has a familiar layout, with the addition of some nice parallax effects. And scrolling text on diagonal vectors. It’s actually way better than it sounds, even if it does remind me a little too much of the marquee element of old.

Parametro

Sometimes, I include a site just because they did one cool thing I haven’t seen before. In Parametro’s case, there’s a mind-map-style presentation on the home page. The rest of the site is good—if typical—minimalism. That thing on the home page is just plain cool, though.

Liah Moss

Post-minimalism ain’t so bad when it’s loaded with color! Liah Moss demonstrates this fact by combining artsy minimalism with a touch of the ’80s. The predictable layout is offset quite nicely by good type, and enough bright pastels to… man I’ve already made too many Morticia jokes. Someone’s going to have to come up with something in the comments.

Sophie Hustin

Sophie Hustin is a painter and sculptor with a simple, dark site to show off her wares. It’s a bit presentation-like, but pretty enough to make it onto this list regardless.

Wild

Wild is a digital branding studio that really, really loves their white space. And who can blame them? Empty space on your screen can feel weirdly refreshing, or panic-inducing, depending on what’s actually supposed to be there.

Anyway, there’s also some pleasant type, and an interesting approach to the portfolio

Biscuit Filmworks

Biscuit Filmworks has embraced a portfolio style I’ve seen a lot lately: the list-of-projects-with-changing-background-on-hover. I need to make up a name for that.

What this site does differently is the color scheme. I’m not entirely sure how they managed to make the entire site look a bit like a sepia filter in abstract, but they did.

Lotta Nieminen

Lotta Nieminen’s portfolio has that almost magazine-like aesthetic (and text size), but combines it with an app-like approach to browsing the site. All of her work is featured on the home page. Some of it just happens to be off to the side. It’s an efficient and elegant way of combining three pages into one.

Elegant Seagulls

Elegant Seagulls has one of the more creative post-modern layouts I’ve seen to date. It might feel a bit cluttered at times, but it also feels fresh. And very seagull-obsessed. It’s one of those sites that might not be optimized within an inch of its life, but goshdarnit, it has personality.

Reed

Reed is bold. And when I say bold, I mean they’ve used pretty much every trend you’ll see on the rest of this list: asymmetry, presentation-style navigation and animation, post-minimalism… everything. They went all out.

And yet, it still kind of works. That’s impressive on its own.

Niketo

Niketo is on this list for reasons of style, and style alone. I wish the designer would make his body text a bit bigger, but otherwise, it’s a pleasure to browse through.

a friend of mine

a friend of mine  is an advertising agency that tries to set itself apart immediately by showcasing their humanity. They largely accomplish this with simple, punchy copy in a minimalist layout. Oh, and there’s mild profanity on the home page.

Well, it certainly sets them apart, and quickly sorts out the customers they want from the customers they don’t want, I guess.

North-East Venture

North-East Venture stands out by having one of the more interesting uses of parallax effects that I’ve seen yet. It combines the sensibilities of a classic typography-and-background images, with just enough animation to make it stand out.

Add to that the way they make every portfolio page match the project, and you’ve got a site that’s just plain pretty.

Elodie Fabbri

Elodie Fabbri has a portfolio that is clean, pretty, and rather dependent on slideshows. It’s simple, yet dynamic and eye-catching. Frankly, the only way it could really be better would be to find a JavaScript-free way to implement all of those slideshows.

Sally Bliumis-Dunn

This is probably the first poetry portfolio I’ve ever reviewed. And I love it.

Most writing sites try to market their products with imagery. They might use the book covers, or push the budget and use some concept art. This site completely ditches that strategy, using fantastic typography to show off excerpts of the poetry itself. After all, that’s what everyone is here for.

Tristan Bagot

Tristan Bagot’s one-page portfolio combines modern layout with a retro, pixelated style that seems to match the overall theme of his work. Simple, and digital-focused. Linking right to the live sites is always a risk, but it keeps things simple, too.

Luke Fenech

We’ll finish this list off with Luke Fenech, a designer and art director. Nothing too out of the ordinary, here. It’s clean, it’s pretty. The type is a joy to the eyes. Sometimes, that’s all you need.

Source

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.

Source

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.

Source

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…

Source

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?

Source

Black Friday and Cyber Monday Deals, Coupons, & Discounts for 2017

It’s that time of year again when people start revving up their shopping lists, hunting down the best deals in town, and are experiencing an all-out shopping frenzy! Now is the best time to invest in premium WordPress Hosting products, themes, and plugins. Wanting to celebrate Black Friday and Cyber Monday with their favorite WordPress enthusiasts, top WordPress companies are…. Continue Reading

The post Black Friday and Cyber Monday Deals, Coupons, & Discounts for 2017 is written by Editorial Staff and appeared first on WPKube.

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.

Source

6 Ways to Design for Anger

In an ideal world, people would come to our websites feeling happy, refreshed, and disturbingly eager to buy stuff. They would know exactly what they’re looking for, and exactly how to get it from us… and never from the competition. Short of asking Aldous Huxley and George Orwell to remake the world in the image of their nightmares, this isn’t going to happen. (That’s a good thing.)

However, that means that when we design websites or apps, we have to make allowances for the fact that our users are human; and will be feeling emotions. It’s terrible, I know. In the spirit of overcoming challenges, I thought I’d tackle the emotion many consider to be the scariest: anger. After all, anger leads to hate, and hate leads to black hat SEO practices.

What? That’s how I heard it when I was growing up.

Angry people have a reason to be angry: conscious or unconscious, rational or decidedly irrational. Maybe something you wrote pushed the wrong button. Maybe their cat mangled their favorite shirt, and now they’re looking for a replacement. They might be very, very upset with themselves over something they did, or did not do.

Now, your website can’t necessarily make them un-angry. That’s hard enough to do in person (and even then, not always possible). If they’re angry for an irrational or frankly dumb reason, it’s not gonna happen. But there are things you can do to avoid exacerbating the problem when they come across your website.

1. Don’t Assign Blame (to the User)

Things go wrong, sometimes; and angry people are prone to making mistakes. Users click on links for pages that have since been deleted. They type in improperly formatted email addresses into contact forms. They miss details. You can’t really design for everything that might go wrong. When the user does run into a more obvious problem, like a 404 page, mis-typed form inputs, or what-have-you, be kind.

Every error message should address mistakes made by the user in a matter-of-fact, everyone-makes-mistakes sort of way. A message that says, “X information is wrong”, is confrontational. Try asking them to double check the field in question instead.

Conversely, error messages generated by a problem on your end should be very clear about where the fault lies. If the server has a hiccup, tell the user that they did nothing wrong. Some users will assume any problem is their own fault, and some will assume it’s yours. Neither will appreciate it if your website’s response makes them feel bad or stupid.

2. Offer Solutions

Just about every article you’ll find on 404 pages will tell you to make suggestions about what the user might do next. In the case of the average user, you’re just giving them a reason to stick around. For an angry user, its much more than that. It’s a way forward. It’s a way to accomplish something instead of just giving up and giving in to their anger in some way.

angry people are more likely to seek the path of least resistance

So when something goes wrong, make sure to let the user know if there’s anything they can do about it. It might make the difference between them calming down, or flat out losing it. Besides, angry people are more likely to seek the path of least resistance, even if that means checking out your competition.

3. Provide a Sense of Progress

Angry people are even more impatient than your average user. If they’re on your website or app, they’re likely trying to do something about it. At the very least, they are trying to do something, even if it’s just to distract themselves, so they don’t have to feel helpless.

This makes things like progress bars, waiting icons, time estimates, and follow-up emails more important than ever. Once they have taken an action, they want to know, for a fact, that your site or app is pulling its own weight. A sense of forward progression can do a lot to ease an angry person’s state of mind.

4. Offer Personal Help

Often the only thing a person needs to be able to calm down is to know that someone else cares. Sometimes, they’ll settle for someone else giving half a damn. This is one more reason why giving users a way to reach an actual human being at your company is so very important.

If you can give them multiple points of contact (email, social media, perhaps even a phone number), just having that information can put them in a better mood. Just knowing that they can reach an actual human being can provide a little hope to a person in emotional distress. If someone else can be contacted, they might care; and if they care, things might be alright.

5. Remove Obstacles

Let’s keep this section simple. No pop-ups. Keep your forms short. Get out of their way. Yes, this principle is best practice already; but it works wonders for angry people.

6. Distract Them

Distraction is powerful, and relaxing

The anger that feels “best” is righteous anger, with outrage coming in on its heels. Pretty much all other forms of anger suck. It’s not fun to feel them in any way. In these cases, distraction can help, and your angry user might very well be looking for something, anything, to take their mind off their anger.

Now, you don’t want to distract them while they’re attempting to take action on your site. That will just make them angrier. But if they have to wait for your web app to process something, that might be the right time for an adorable animated sprite, or a random fun fact. Distraction is powerful, and relaxing.

Bonus Tip:

Auto-playing audio or video is enough to get people angry in the first place. (I’ll keep saying it until people stop doing it.)

Source