Day: September 15, 2021 | The Blog Pros

September 15, 2021

Don’t Get Caught in These 6 Mobile A/B Testing Mistakes

Mobile A/B testing can be a powerful tool to improve your app. It compares two versions of an app and sees which one does better. The result is insightful data on which version performs better and a direct correlation to the reasons why. All of the top apps in every mobile vertical are using A/B testing to hone in on how improvements or changes they make in their app directly affect user behavior.

Even as A/B testing becomes much more prolific in the mobile industry, many teams still aren’t sure exactly how to effectively implement it into their strategies. There are many guides out there about how to get started, but they don’t cover many pitfalls that can be easily avoided–especially for mobile. Below, we’ve provided 6 common mistakes and misunderstandings, as well as how to avoid them.

September 15, 2021November 4, 2021

How Prototyping Saves You Key Development Time

Developing websites and apps for your business takes time. Don’t waste precious time relying only on developing alpha, beta, and final release models. There are more than 3 stages when developing a website or app. Prototyping is the blueprint stage of creating a product when designers go from laying the foundation for the design to creating a lifelike replica of how the website or app should work.

When prototyping, there are many stages, such as creating the user journey, creating basic sketch outlines, and creating the prototype app with real animations and interactions. Using prototyping is faster than developing because of basic concepts such as drag and drop that help product teams quickly develop a webpage from scratch. Below are five ways prototyping helps a product team and the overall product be more impactful on the targeted audience.

September 15, 2021

Sendbird Leverages AI, Adds FAQ Chatbot to its Customer Support Platform

Sendbird, a mobile communications services provider, has added a new FAQ chatbot to Sendbird Desk, the company’s platform for orchestrating embeddable live chat support. By leveraging this new product customers can offload quick questions to AI, freeing up live agents for more in-depth support.

ProgrammableWeb reached out to Sendbird to discuss what this means for developers.

September 15, 2021

Is SFML good for C++ newbies?

I am just learning C++. I haven't made any games with SFML or anything like that. Just wondering whether SFML would be easy for a newbie like me. I am planning on using it after I finish learncpp.com. I am currently at the header guards section right now. Also, what do you... <DANIWEB>-users think of learncpp?

September 15, 2021

10 Creative Hamburger Menus + Tips & Tricks

When browsing through websites, you’ve most likely come across three horizontal lines on the top right corner of the webpage. While not present on every site, these lines are commonly referred to as “hamburger menus” by UI designers.

What is a Hamburger Menu?

A hamburger menu is a navigation tool that opens up to a side menu and is used for both mobile apps and websites. The role of these navigation bars is to help you easily maneuver anywhere on a website in a user-friendly manner and without having to scroll up to hunt for navigation.

Hamburger menus were first introduced more than three decades ago by a man named Norm Cox. He made the burger icon for Xerox Star, which was the world’s first graphical user interface. The purpose of the triple bar icon was to let users know that the button contained a list of items. However, despite it being around for quite some time, it wasn’t widely used until 2009 and has gotten a lot of criticism over the years.

The UX Designer Toolbox

Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design Assets
Starting at only $16.50 per month!

Pros and Cons of Hamburger Menus

Before we get into the examples, let’s first explore the pros and cons of using hamburger menus.

Pros

It provides quick secondary access: Users can quickly access desired pages without having to scroll through pages.
Recognized by many users worldwide: The sign is common and can be found everywhere from mobile games to web pages to apps.
Makes the webpage appear organized: The hamburger menu helps with maintaining focus on the important web features you’d like users to see. It also keeps the web page clean.

Cons

Lower engagement: When users can’t easily access a web page, they’re less likely to click on it.
Makes pages seem less important: Because all the important information is accessed on the first page it’s less likely for users to navigate through the menu.
Hard to reach: Hamburger menus can be hard to reach or press in some mobile designs.

Tips for Making a Good Hamburger Menu

Here are a few quick tips for ensuring your hamburger menu is identifiable and effective:

1. Use Animation

A hamburger menu without an animation that turns the three horizontal lines into another shape is rarely seen. Put it to good use.

2. Use a Custom Icon

It’s important that the menu remains recognizable to ensure a great user experience. Using a custom icon helps many users identify it.

3. Responsiveness

Mobile users prefer the vertical sliding or the horizontal navigation bar while computer users prefer a more detailed menu with tabs of content, rows, and vertical links. Designing your hamburger menus to be responsive will ensure users are presented with the ideal menu option regardless of the device they’re using.

10 Worthy Examples of Hamburger Menus

What follows are 10 high-quality options of hamburger menus currently available on Codepen to choose from. Why start from scratch when you don’t have to?

Menu Toggle by Tamino Martinius

See the Pen
🍔 <-> ❌ (version 1) by Tamino Martinius (@Zaku)
on CodePen.light

Open Close by Vineeth TR

See the Pen
Open Close by Vineeth.TR (@vineethtrv)
on CodePen.light

Morphing Hamburger by Sergio

See the Pen
Hamburger icon with Morphing Menu by Sergio Andrade (@sergioandrade)
on CodePen.light

Animated Hamburger Menu by Mathew Ladner

See the Pen
Animated Hamburger Menu by Matthew Ladner (@netfuel)
on CodePen.light

CSS3 Only Hamburger by David Krajewski

See the Pen
Hamburger Icon CSS3 ONLY Animation by Dawid Krajewski (@DawidKrajewski)
on CodePen.light

Hamburger Menu Alternatives to Consider

If hamburger menus aren’t speaking to you, there are some alternative options worth taking a look at.

1. Scrollable Navigation

This type of navigation tool is normally used for longer lists. Making the list scrollable allows users to easily move side-to-side. For example, it’s mostly used for news websites when users are expected to scroll through news categories, and also works well for online stores and music apps.

2. Tab Bar

Tab bars are considered to be the simplest navigation option with the main navigation options easily visible. For example, if you have an app that has a limited number of web pages/features then this is definitely the way to go.

Some things to consider with this navigation include:

The home page has to be in the first tab and the rest should follow according to the level of importance.
The tab bar allows no more than five navigation options.
It’s important for at least one of the options to be highlighted and active.
Use icons with labels unless for actions that are common and easily recognizable.

3. More Option Tab Bar

The ‘more’ option tab bar is most suitable if you have more than five top-level destinations.

The extra option can work well as a dropdown menu. To improve navigation you’ll need to correctly prioritize the options for users to have at least four to five on the screen at all times.

4. The Progressively Collapsing Menu

This type of menu fits on the whole screen and shows as much of the navigation as possible. Everything else is put under the “More” button. This provides a better user experience than the tab bar design.

5. Full Screen Navigation

The full screen navigation solution takes up the whole homepage for navigation purposes. Users then swipe to access additional menu options as they scroll up or down.

This type of navigation helps designers organize huge amounts of information without overwhelming the user.

Conclusion

When picking out a hamburger menu, make sure you pick one that’s most suitable for your website or app. Making navigation within an app seamless and user-friendly will encourage users to engage with it more than once and even attract new users. Just make sure you test the speed and efficiency before implementing. But then you should be good to set your visitors browsing. Good luck!

September 15, 2021

A Beginner’s Guide to Successful Web Scraping

Amongst many other great things, the Internet gave humanity the free movement of public information. With so much data available at one click of a button, third parties that build businesses and develop products have...

The post A Beginner’s Guide to Successful Web Scraping appeared first on 85ideas.com.

September 15, 2021

Reducing The Need For Pseudo-Elements

Per the W3C spec, “a pseudo-element represents an element not directly present in the document tree". They have been around since version 1 of the CSS specification, when ::first-letter and ::first-line were introduced. The popular ::before and ::after pseudo-elements were added in version 2 — these represent content that does not exist in the source document at all. They can be thought of as two extra elements you can “tack onto” their originating element. When front-end developers hear “pseudo-elements”, we think of ::before and ::after more often than not, as we use them in various ways to add decorations to our elements.

There are additional pseudo-elements beyond these. They are listed in the spec across three categories: typographic, highlight, and tree-abiding.

Interestingly, after years of web development, I never found myself using ::first-line, but it’s pretty neat and responds well to window resizing! Check it out.

Pseudo-Element Version

Many of you reading this will be accustomed to a pseudo-element version:

We use a relatively positioned wrapper element with large right padding to accommodate our angle — this is our <button>;
Many of us, students of the sliding doors technique, are accustomed to nesting an element to take on the button’s background-color;
Finally, we absolutely position a pseudo-element with its border rules into our <button>’s right padding empty space — we use ::before for this.

Aside from those steps, our hover styles must account for both our nested element and pseudo-element. This might seem manageable for you, but the more complicated our button designs get, the more overhead we have with hover styles. Also, with this version, buttons with word wrapping just plain fail.

Visit the final showcase to see these other button styles made easier without pseudo-elements. In particular, the blue bevel button’s pseudo-element version is pretty brutal. The amount of overall work is greatly reduced thanks to clip-path.

Button Wipes

A wiping effect is a popular button style. I’ve included left-to-right and top-to-bottom wipes.

Pseudo-Element Version

This can be achieved by transitioning a pseudo-element’s transform.

We absolutely position a ::before pseudo-element and give it a transform: scaleX(0) so it’s not visible.
We also must explicitly set its transform-origin: 0 0 to ensure the wipe comes in from the left rather than center (transform-origin defaults to center).
We set up transitions on the transform for some smooth jazz animation on/off hover.
Because our pseudo-element is absolutely positioned, we require a nested element to hold the button’s text, position: relative on this nested element creates a new stacking context so our text stays on top of our wiping pseudo-element.
On hover, we can target our pseudo-element and transition its scaleX to now be 1 (transform: scaleX(1)).

See the Pen Button wipe with pseudo-element by Marcel.

No Pseudo-Element Version

Why worry about nested elements, pseudo-element positioning, stacking contexts, and sprawling hover rules if we don’t have to?

We can reach for linear-gradient() and background-size to nail this down.

We give our <button> a background-color for its default state, while also setting up a linear-gradient via background-image — but the background-size will be 0, so we won’t see anything by default.
On hover, we transition the background-size to 100% 100% which gives us our wipe effect!

Remember, linear-gradient() uses the background-image property and background-image supersedes background-color, so this is what takes precedence on hover.

That’s it. No nested element required. Want a vertical wipe? Just change the linear-gradient direction and the background-size values. I’ve changed those via CSS custom properties.

See the Pen Button wipe with NO pseudo-element by Marcel.

Tiles With Screen Color Overlays

This is a common pattern where a semi-transparent color overlays a tile/card. Our example’s tile also has a background-image. It’s often important in this pattern to retain a set aspect-ratio so that tiles look uniform if more than one appears in a set.

Pseudo Version

Some of the same things come into play with our pseudo-element version:

We use the aspect-ratio “padding-trick”, setting a 60% padding-top value (5:3 ratio) for our tile.
We must position our screen color overlay pseudo-element, giving it a 100% width and height to fill the tile — we target this pseudo-element on hover to change its background-color.
Due to the pseudo-element’s absolute positioning, we must use a nested element for our text content, also giving it position: absolute in order for it to appear above our screen color overlay in the stacking order and to ensure it appears where it should within the tile.

See the Pen Tile screen color overlay with pseudo-element by Marcel.

No Pseudo-Element Version

It can be much simpler thanks to the aspect-ratio and background-blend-mode properties.

Note: aspect-ratio does not work in Safari 14.x, but will in version 15.

That said, as of this writing, caniuse lists it with 70%+ global support.

The “padding-trick” is replaced by aspect-ratio: 400/240 (we could use any 5:3-based value here).
We use both background-image and background-color properties in conjunction with background-blend-mode — simply change the background-color of our tile element on hover.

`Background-blend-mode`

background-blend-mode blends a background-color with an element’s background-image. Any Photoshop users reading this will find background-blend-mode reminiscent of Photoshop’s blending modes. Unlike mix-blend-mode, background-blend-mode does not create a new stacking context! So no z-index hell!

See the Pen Tile screen color overlay with NO pseudo-element by Marcel.

You can find the full showcase demo here →

Conclusion

Front-end development is exciting and fast-moving. With newer CSS properties, we can brush the dust off our old techniques and give them another look. Doing this helps foster reduced and simpler code. Pseudo-elements are helpful, but we don’t need to reach for them as much.

September 15, 2021

How to Improve WordPress Search with SearchWP (Quick & Easy)

Do you want to improve your WordPress search with SearchWP?

By improving WordPress search, you can show your users the most relevant results to improve content discoverability and make more sales.

In this article, we’ll show you how to improve your WordPress search with SearchWP easily.

What is SearchWP?

SearchWP is the best custom search plugin for WordPress, used by over 30,000 websites. It lets you improve your WordPress site search to deliver more relevant results to your visitors.

This plugin puts you in complete control of your WordPress search algorithm. You can create your own relevance scale and adjust the algorithm without writing any code.

SearchWP also lets you make any part of your site searchable, including PDF documents, custom tables, ACF files, text files, custom fields, WooCommerce products, and more.

You also get access to detailed search metrics to see what your visitors are searching for and the types of content they’re finding.

This gives you actionable insights to improve your existing content and plan new content.

Plus, SearchWP automatically integrates with all major WordPress plugins like WooCommerce, bbPress, Meta box, Easy Digital Downloads, and more.

Beyond improving your default WordPress search, it has more features like redirection after a search is performed, excluding specific content from search, keyword stemming, support for multiple search engines, and more.

With that said, let’s show you how to set up SearchWP properly to improve your WordPress search.

How to Install and Set Up SearchWP

The first thing you need to do is activate and install the SearchWP plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » SearchWP page and then click on the ‘License’ menu option.

Then, enter your license key in the ‘License’ box and click the ‘Activate’ button.

You can find this information in your account on the SearchWP website.

Once you’ve done that, you need to click on the ‘Engines’ menu option.

This brings you to a screen where you can set your search engine settings. Think of it like creating your own Google search algorithm for your website.

With SearchWP, you need to create a site-wide search engine before you can customize your search further.

You can adjust your search engine settings by clicking on the ‘Posts’, ‘Pages’, ‘Media’, or other available drop downs.

Every section has ‘Attribute Relevance’ sliders that change how the search engines value and rank content. For example, if you want to value the post title higher than the content, then you can adjust the slider accordingly.

After you’re done customizing your default search engine settings, make sure to click the ‘Save Engines’ button to create your first search engine.

Once the initial index is created, SearchWP will replace the default WordPress search with your new improved search. If your theme already has a search box, then you don’t need to make any changes.

If you don’t already have a search box on your website, then it’s easy to add one. Simply navigate to Appearance » Widgets and click the ‘+’ icon to bring up the widget block menu.

After that, type ’Search’ into the widget search box.

Then, select the ‘Search’ block.

This will insert a search form into your sidebar.

You can customize the title of your search form and add optional placeholder text if you prefer.

Make sure you click the ‘Update’ button to save your changes.

Now when your visitors use your search form, they’ll be using the improved SearchWP search.

There are all kinds of ways you can customize the search experience on your site with SearchWP, so let’s take a look at a few of them below.

How to Make PDF Files Searchable in WordPress

If you upload a lot of PDF content to your website, then you can allow your users to search the text in the PDF files to find what they’re looking for.

SearchWP quickly indexes the PDF content you’ve added to your media library and displays the files in search results.

To make sure your PDFs are searchable, go to SearchWP » Settings to bring you to the engines page.

Then, in the ‘Media’ section, you’ll find a slider called ‘Document Content’. You need to make sure this is enabled.

For some users, this option won’t be enabled yet.

To turn this on, click on the ‘Add/Remove Attributes’ button.

This brings up a popup where you can manage the attributes for how your media is searched.

Simply check the ‘Document Content’ box and then click ‘Done’.

Now, you can adjust the slider settings to give weight to your PDF content.

Then, make sure you click the ’Save Engines’ button.

Now, your visitors will be able to search through your PDF content and find relevant results.

When your visitors click the PDF result it will take them to a page where they can view the entire PDF document.

Add a Search By Category Feature to WordPress

If you have multiple categories of content on your WordPress website, then you might want to let users search for a single category at a time.

You can do this by adding a category select drop down to your search forms.

For more details, see our guide on how to search by category in WordPress.

Add a Live Ajax Search Function to WordPress

Another feature you’ve probably seen is live Ajax search, also called instant search. This adds a drop down autocomplete feature that’s common in search engines like Google.

Instant search helps your visitors to more quickly find what they’re looking for, which can keep them on your website longer.

SearchWP makes it easy to add this feature to your website.

For more details, see our guide on how to add live Ajax search to your WordPress site.

Add a Smart Product Search to Your Online Store

If you run an online store, then you want to make sure your visitors can find the products they’re looking for.

SearchWP makes it easy to improve your WooCommerce product search and make more sales.

You can fully customize your WooCommerce search engine and give weight to the product attributes that matter most.

For more details, see our guide on how to make a smart WooCommerce product search.

Create a Custom Post Type Search Form in WordPress

With SearchWP, you can create all kinds of advanced search forms, like a custom post type search form.

To do this, you’ll create a separate search engine that only searches through a single post type. For example, here is a search form that will only search through coupon posts.

For more details, see our guide on how to create advanced search forms for custom post types in WordPress.

SearchWP is a very flexible and valuable WordPress search plugin. You can create completely custom WordPress search engines that deliver more relevant results for your visitors.

We hope this article helped you learn how to improve WordPress search with SearchWP. You may also want to see our picks of the best live chat software for small businesses and our guide on how to get a free business email address.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Improve WordPress Search with SearchWP (Quick & Easy) appeared first on WPBeginner.