Tuesday, September 11, 2018

Smashing Book 6 Released

The hotly anticipated Smashing Book 6: New Frontiers in Web Design, is released today. Dedicated to some of the thorniest problems we face in our professional lives, it takes a swing at some of the biggest headache-triggering issues in contemporary web design, from the accessibility of single-page apps in React and Angular, to designing for Smart watches.

You’ll find solutions to problems with CSS’ latest layout tool CSS Grid, as well as CSS custom properties—the much needed answer to variables in CSS—plus asset loading in the world of HTTP/2.

As well as the developer-focused content that makes Smashing popular, you’ll also find some design-specific topics. The book covers implementing design systems in the real world, designing conversational user interfaces, both augmented and virtual reality design, working with chatbots, and the hot topic of the moment: responsive art direction.

Authored by some big-names in the industry, including a few WebdesignerDepot favourites, the book includes content written by Laura Elizabeth, Marcy Sutton, Rachel Andrew, Mike Riethmueller, Lyza D. Gardner, Yoav Weiss, Adrian Zumbrunnen, Greg Nudelman, Ada Rose Cannon, and Vitaly Friedman.

Smashing Book 6 is available now, as a hardcover or an ebook, direct from Smashing Magazine.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot https://ift.tt/2OaodBC



from WordPress https://ift.tt/2MmWDiI

What Do Sites That Have Never Been Penalized by Google Look Like?

google love

User signals!

It’s the one thing SEOs don’t optimize for.

I don’t know why most SEOs ignore this metric considering how important it is to Google.

See, Google doesn’t care to put the website with the most backlinks at the top or the best on page SEOthey want to put the website that you and other people love at the top.

That’s why they look at user signals.

Now, if you aren’t familiar with user signals, check out this experiment by Rand Fishkin that I discussed in a recent article.

It shows that if everyone performed a Google search and clicked on the 4th listing instead of the first one, the 4th skyrockets to the top spot almost instantly.

I’m not saying you should tell your users to click on your listings over the competition. Instead, you should focus on the user. Because if you can make users love your site, then you will rank higher over time.

So, my team and I thought it would be fun to look at the Google Analytics accounts of websites that have never been impacted negatively from a Google algorithm update to see what type of sites Google loves to rank (and their user signals).

By looking at metrics related to the user such as bounce rate, time on site, pageviews per visitors (and 5 other signals), we were able to come up with benchmarks that you should aim for.

We ended up analyzing 518 sites. But before we go into our findings, here are some notes about the data:

  1. Each website had to have been around for at least 3 years. We didn’t look at any brand new websites because they wouldn’t have been around long enough to figure out if Google loved or hated them.
  2. Each website had at least 5,000 monthly visitors a month from Google.
  3. We excluded sites there were in Alexa’s top 1,000 list. Plus we didn’t really have any data we could share from any of those sites.
  4. We exclude any company that was generating over $100,000,000 in revenue. I know that seems high, but we needed a ceiling. When you start looking at data from extremely popular companies, it really skews the data.
  5. We bucketed sites into 10 different categories and we looked at both B2B and B2C sites.
  6. All of the data was gathered using Google Analytics and Google Search Console.

Let’s start.

User signal #1: Bounce rate

You’ve heard the term bounce rate before. And you know that you want to get it as low as possible. But before I get into that, let’s break down the definition:

The percentage of visitors to a particular website who navigate away from the site after viewing only one page.

We found that Google loves sites that have a bounce rate between 26% and 69%:

bounce rate

Based on the type of site you have, you should aim to have a bounce rate as close to (if not better than) the sites above.

If you have a bounce rate that is higher, just follow these 13 steps to help reduce it.

User signal #2: Mobile friendliness

Roughly 60% of all searches take place on a mobile device.

Because more people search Google using a mobile device and due to the fact that they have a mobile-first index, we thought it would be wise to see if sites that are in the good graces of Google have a mobile-friendly site.

mobile friendly

As you can see, all 518 sites had a mobile-friendly site. In almost all cases, they didn’t have a “separate” site just for mobile, instead, their website was responsive.

This also makes sense because these days you have to think mobile first when you are designing or creating any website.

If your website isn’t responsive, you should get that fixed ASAP.

And I know some of you are probably wondering about AMP. Most of the sites we looked at were not leveraging the AMP framework as they weren’t all blogs.

User signal #3: Average load time

This is the only metric we didn’t leverage from Google Analytics or Search Console. Instead, we ran each website through Pingdom.

average load time

In general, the faster your website loads the better off you are. Why would you want people to have to wait 5 or 10 seconds for your site to load? I know I don’t like waiting.

Google not only uses it as a factor within their algorithm but the slower your site loads the fewer sales you will generate.

If an e-commerce site is making $100,000 per day, a second in load time delay will roughly cost you $2.5 million in lost sales each year.

If you want to improve your load time in the eyes of Google, check out this Page Speed Insights tool that they have. It breaks down exactly what you need to fix.

Don’t worry about getting a perfect score, just get as high as possible.

User signal #4: Percentage of repeat visitors

No one really knows the exact factors Google uses in their algorithm.

And no one has proof if Google is using data from Google Analytics, Chrome, or toolbars (as far as I know). But if I had to guess, I would say there is a high chance they are assuming it is legal.

One of the signals I would look at is repeat visitors. The fact that someone keeps going back to a website tells Google that it has loyalty and people love it.

repeat visitors

As you can see from the graph above, websites that have done well on Google have anywhere from 16% to 45% repeat visitors.

When you are starting off, your repeat visitor count is going to be extremely high because it’s going to be you and your friends continually going back to your site.

But as you grow, you’ll notice that it will drop to less than 10%. To get visitors continually coming back to your website, you’ll want to use tools like Subscribers.

It’s a simple tool. It uses browser notifications to get people back to your site.

push traffic

As you can see from the screenshot above, I used Subscribers to get 42,316 people back to my site 174,281 times.

User signal #5: Percentage of search traffic from brand queries

I’ve blogged about this in the past and have even shown you how my search traffic started to climb as my brand queries grew.

Just as a quick recap, I found that as more people Googled “Neil Patel” or variations of it, Google started to rank my site for other terms like “online marketing.”

Once I learned that brand queries help, I spent more time on building a brand. Now during any given month, I generate roughly 40,412 visitors per month from brand related terms:

brand queries

I even generate 3,806 brand queries on YouTube:

youtube searches

It’s not just me either. Sites that continually dominate Google also have brand queries as a portion of their search traffic.

brand searches

And these sites aren’t just getting people to search for their brand, but a high portion of those searches land back to their site. In other words, their brand queries have a high click-through rate.

brand queries ctr

If you want to dominate Google, you need to build a brand.

The bigger your brand and the more loyal people are to it, the more search traffic you’ll get over time.

If you aren’t familiar with how to build a brand, check out hack number 3 in this article that I recently wrote.

User signal #6: Click-through rate

Speaking of click-through rate, we thought it would be interesting to analyze everyone’s Google Search Console to see the click-through rate these sites had.

search traffic ctr

Most of these sites had click-through rates between 1.9% and 3.1%.

If your website has a low click-through rate, you can improve it by following these 13 steps.

My best advice is to continually A/B test your title and meta description tag to see if you can make it more appealing so that more people want to click on your search listing as opposed to your competitor’s.

User signal #7: Pageviews per visitor

If someone continually browses your site and visits many pages, you are usually doing something right because it means that people like your content, product, service, or whatever else you are offering.

Of course, you can game the system by writing a really long article and only putting a few hundred words on each page and make people click a “next” button to keep reading more.

But that’s a terrible user experience and you don’t want to do that.

You want people to naturally want to visit tons of pages on your website without having to trick them.

So how many pageviews per visitor do high ranking sites have? Well, here’s the average:

pageviews per visitor

If you want to boost your pageviews per visitor, just follow the tips in this article.

User signal #8: Average time on site

You don’t want people to leave your site… unless they are going to buy something or click on ad.

You want them to stay on your site as long as possible.

time on site

As you can see from the chart above, websites that ranked well on Google were able to keep people around for at least 1.6 minutes if not all the way up to 5 minutes.

Now the 5-minute number is going to be a bit tough, but if you can keep people on your site for over 2 minutes you are going to do well.

Plus, you’ll have fewer chances of getting hit by a Google Panda penalty.

This article will teach you how to keep people on your website longer (without tricking them).

Conclusion

To dominate Google, you need to think like Google. It’s not just about gaming the system and tweaking your site so that Google loves you.

It’s more about understanding their main objective, which is to put the user first.

That means that if you also put the user first, in the long run, your rankings should slowly climb.

Now, this doesn’t mean you can ignore normal SEO practices like on-page SEO and link building, but instead, you need to do all of that in parallel with focusing on the user.

So how do your metrics stack up with the benchmarks above?

The post What Do Sites That Have Never Been Penalized by Google Look Like? appeared first on Neil Patel.

from Blog – Neil Patel https://ift.tt/2x5lhPt



from WordPress https://ift.tt/2oYsexW

18 Tips For Running a Successful Design Sprint

Development time is a precious resource. In order to be more efficient and responsive, product teams continuously try to use advanced techniques for product creation. One of the most popular frameworks that help the product team to achieve this goal is a design sprint.

A design sprint is a framework that helps answer critical business questions through rapid prototyping and user testing. Basically, it’s a shortcut to learn without building and launching a real product.

In this article, I want to highlight key things that should be taken into account when running a sprint.

Before the Sprint

Preparing for a sprint is one of the most critical steps in the process. Proper preparation will help make the best use of the time you’ll spend on this activity.

1. Write a Sprint Brief

A sprint brief is a document that outlines the sprint challenge, key goals, and the deliverable that the team plans to produce during the sprint. The focus of the sprint should be clear to everyone on the team. And a clear sprint brief will get everyone on the same page.

2. Consider Testability when Selecting a Sprint Challenge

Testability should be a critical factor in the process of challenge evaluation. If the problem you are looking to solve cannot be tested, then it may be not suitable for a sprint.

3. Invite People From Different Departments

A lot of sprint benefits come from bringing together a cross-functional team of people — UX designers, developers, product managers, researchers. Team members will be able to review the problem from different angles.

4. Prepare the Environment

While it’s possible to run a remote sprint, nothing beats the feeling of real people in a same physical space. The space itself should be good for this activity. A design sprint requires a dedicated space for the entire week with whiteboards to cover in user journey maps, sticky notes, sketches, storyboards, etc. Conference rooms aren’t normally the most creative spaces.

5. Have a Sprint Leader

The sprinter (or sprint leader) is a person who’s in charge of the event. Sprinters are the most critical people for the design sprint. These are the people that are responsible for creating the work in the sprint — they make sure that the team works efficiently.

During the Sprint

During the sprint the team should go from understanding a problem to building and test a solution for that problem.

6. Don’t Try to Build a Solution on Day One

It might be tempting to create a solution on the day one. But it’s better to avoid that temptation. Slow down a bit and try to build a solid foundation for your project first. By doing that you’ll be sure that you’re not wasting your team time focusing on the wrong part of the problem.

7. Start at the End

Fast forward and look ahead a year (or even further). Imagine what your product will look like. It will help you establish a long-term goal. You should also try to understand what can prevent you from achieving this long-term goal.

8. Ask the Experts

Invite experts to give talks to your sprint team. Those experts might be people from different departments or even external experts. Ask questions or interview them. The knowledge you get from experts will help you improve your understanding of the problem and ultimately refine your solution.

9. Take Notes in a “How Can We…” Format

When all team members use the phrase “How Can We…” to frame the core problem, it’ll be much easier to organize and process the notes.

10. Don’t Allow Anyone to Leave

Everyone needs to be a consistent participant in a sprint. When someone leaves early (or shows up in the middle of proceedings) the productivity of the whole team suffers significantly (in fact, the team might need to start from the beginning).

11. Document Your Progress

Try to write a daily summary after each day. This will help you look back at what was done and get better at designing sprints in the future.

12. Follow Time Limits

The sprint is a five-day process. That means that the team should find a solution to the problem and discover whether or not that solution actually works in five days.

Avoid breaking the sprint — make sure you’ll have five consecutive days. It doesn’t matter whether it’s Monday-Friday or Wednesday-Sunday, as long as the days are consecutive. It will create valuable momentum that will help you achieve your goals.

13. Avoid Using Devices in the Room

You won’t have much time during the sprint, so it shouldn’t be wasted on reading news or checking emails. Use devices during breaks or step outside the room to use them, if necessary.

14. Ask the Right Questions

The questions you ask during each phase of the Design Sprint always play a vital role in a final result. Ask questions that start with “Is…”, or “Can…”, “Will…” These questions can spark discussions which are great when you’re brainstorming solutions.

15. Use Crazy 8s Technique

The sprint team should explore all possible solutions to the problem. Sketching is a great way to go from a general understanding of a problem to a concrete solution that everyone can understand and evaluate.

To increase the speed of sketching it’s a good idea to use the Crazy 8s technique: Each team member takes an idea that most excites them and rapidly sketches eight variations for this idea in 8 minutes. For example, if you design a page layout, this might be eight variations of that layout. By the end of the day, you should have a tall stack of solutions to the problem.

16. Create a Realistic Prototype

The more realistic prototype will be the more valuable insights you’ll get from your users.

Here are a few tips for creating a prototype:

  • The prototype shouldn’t be too complicated. You need to build a realistic solution — something you can put in front of your users and get a real reaction.
  • To create a prototype use tools that you work with the most of the time. For example, if you usually use Adobe Photoshop or Sketch to create screen designs, use that tools to create a prototype. Remember that you need to move fast.
  • It’s essential to divide the process of creating a prototype between team members. You don’t need to have a single person responsible for creating every single part of a prototype.
  • Trial run your prototypes. A trial run of a prototype makes sure that it all makes sense. A trial run will help you fix some mistakes before the testing with users.

17. Validate any Prototype with Real Users

The validation stage answers the most critical question in product design — “How do I know if my work is any good?” During the validation phase, you should test your prototype with real users. Show a user the prototype you’ve built and watch their reactions.

  • Validate your product in a format of 1 to 1 interviews. You need to have a series of such interviews (preferably, five interviews).
  • You need to hire a user/customer who matches your target user profile.
  • Make sure the entire team can watch the interview with a customer. The sprint team shouldn’t be in the same room during the interview, but they should be able to watch the translation and take the notes in the real time. The notes will reflect what goes well, and what didn’t go so well. It will help the team to find patterns.

Before Wrapping up the Sprint

18. Make a Plan

Talk with your team and make a plan about what to do next. This plan will help you to understand the next step for your product development process.

Conclusion

A design sprint is an excellent framework that can help a team move from idea to learning in just five days. Remember the concept of learning is at the core of any design sprint framework.

If you succeed, at the end of the sprint you will have a prototype that your product team can turn into a real product. But if you’ve failed…don’t worry, it’s also a great result. Now you know that you had a bad idea, you don’t need to invest your time in it. The great thing is that you were able to figure this out in just a few days, not months or years.

 

Featured image via Depositphotos.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot https://ift.tt/2MmEfa1



from WordPress https://ift.tt/2O69aZH

Monday, September 10, 2018

What’s New for Designers, September 2018

This month’s collection of new tools and elements for designers has a common theme – productivity. There are so many things here to help you do work better and more efficiently. But there’s fun too…make sure to look for some of the hidden design gems deep in this article. They’ll bring a smile to your face for sure.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!

Brandy

Brandy is a brand asset management tool for macOS. Use it to keep up with colors, logos, gradient patterns and fonts by project. Everything works in real-time and one account can contain as many brand projects as you like. Plus, it works using drag and drop so assets are always at your fingertips.

Picular

What if you could Google a color? That’s what Picular does. The tool allows you to put in a word or phrase and returns color results – by hex code – that represent that word. It works by pulling images of that word and boiling them down to a single hue. (Hover over colors to see the source image.)

Drawser

Drawser is a vector graphics tool that works in-browser so that you can draw and edit on the screen. It includes interactive features so you can collaborate on vector-based projects online. Drawser includes a social component and community as well with the ability to publish projects and allow other users to refine them in the open source platform.

RSSHub

RSSHub is a lightweight RSS aggregator that can grab a feed from pretty much anything. (It does everything you wish some of the old RSS options of the past did.) The documentation is straightforward and implementation is quite seamless with plenty of options to get just the feed you want.

SVG Filters

SVG Filters is a fun playground where you can add different effects to SVG-based images and text with just a click. Use the toggle settings for each filter and watch the image change on the screen. Copy the provided code and your filtered image is ready to go.

Code Surfer

Code Surfer is a React component for scrolling, zooming and highlighting code. You can highlight single or multiple lines of code, scale long snippets and more.

ShrinkMe

ShrinkMe is an image compression app that works in seconds. Drag and drop you photo into the window and get a downloadable file that’s significantly smaller. (My sample image shrunk by 62 percent without image quality loss.) Plus, this tool works offline and you can shrink multiple files at once.

Fake 3D Effect

Can’t make it? Then fake it. This pen by Robin Delaporte features a fake 3D effect with a depth map. It’s definitely an interesting way to use a three-dimensional effect with an image and no fancy equipment.

Splitting

Splitting helps you create a trendy split text effect with CSS. The tool creates elements and adds CSS variables for animating text, grids, and more. It’s lightweight and easy to use with plenty of documentation to guide you through set up.

Tutorial: Advanced Effects with CSS Background Blend Modes

Bennett Feely takes on how to work with a few different CSS properties to create blended background objects. The tutorial primarily focuses on background-blend-mode and how to create impressive patterns.

Food & Drinks Icon Set

The Food & Drinks Icon Set is a collection of 60 icons featuring plenty of edibles. Each icon comes in a cull color style as well as line icon style. Download the vector shapes and customize for projects.

Gradient Icons

Gradient Icons is a pack of 100 icons of varying types with trendy gradient coloring in a flat style. The collection expands to 1,000 icons in the full paid set.

EmojiOne 4.0

EmojiOne 4.0 is a premium collection of emojis restyled for 2018. Each design has been tweaked to reflect current design trends with subtle gradients and a clean finish.

Best Animated Logos

Best Animated Logos is a collection of logos you know with awesome animations attached. From Google to Tumblr to Skype to Reddit, these animations will inspire you for sure.

Heard at Work

Heard at Work is a collection of overheard exclamations that aims to capture what it’s like to work in a New York design studio. It’s fun, honest and maybe a little bit silly. The project was created by Justine Braisted.

The Carlton Dance

The Carlton Dance pen just makes me smile. A favorite move from the beloved Carlton character from the Fresh Prince of Bel-Air (a 90s sitcom) has morphed from a meme to a pure CSS character.

NerdRobe

NerdRobe makes totally cool—albeit geeky—shirts for designers. There’s a new design every other week and shirts are just $10 plus shipping (based on your location). So you’ll want to keep checking back for the design that fits your sensibilities.

Abhaya Libre

Abhaya Libre is a unicode compliant, complete libre version of the widely used Sinhala typeface FM Abhaya and includes Sinhala and Latin support. It includes five weights and is also available as a Google Font.

Brand New Roman

Brand New Roman is a typeface generator that uses brand icons and marks to create a font. The end result can look a little like a ransom note, but it can be fun to play with. Put in your words and download.

Jomhuria

Jomhuria is a stencil style typeface that’s highly readable. It’s designed for large sizes and might not work as well in smaller applications. The full set includes more than 800 characters.

Library 3 AM

Library 3 AM is a somewhat round inline typeface with two styles. It’s great for display or poster designs and is free for all uses.

Space Grotesk

Space Grotesk is a sans serif typeface with five styles available with the open font license. It features a full character site with emphasis on circular elements.

UStroke

UStroke is a handwriting-style decorative typeface with a grunge feel. It includes all uppercase characters with a few alternates and numerals. Although application is limited, it’s an interesting option.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot https://ift.tt/2O3YZ82



from WordPress https://ift.tt/2CMGPXk