This Refcard contains all things MySQL. From MySQL’s most important applications, popular features, common data types and commands to how to get started on Linux, this Refcard is a must-read for all developers, DBAs, and other tech professionals working in MySQL.
Source de l’article sur DZONE
Articles
Having the right WordPress plugins on hand can do wonders for your business or online presence. WordPress offers a vast collection to choose from.
There are so many of them. However, finding those that get the best reviews and can do the most for you can be a challenge.
A plugin can give you additional functionality. It could otherwise be difficult or overly expensive to realize with your website by itself. A glance at the 10 top WordPress plugins described below can provide a powerful case in point.
Your website’s purpose or niche will usually dictate the types of essential WordPress plugins you would do well to invest in. The right ones can make your website a genuine powerhouse and, by extension, your business as well.
1. Amelia
Amelia is an excellent choice for beauty, healthcare, fitness, consulting, and businesses that might be saddled down with a manual or semi-manual booking system by saving them and their clients time while eliminating booking mistakes that often occur in those manual systems.
- Clients can book appointments online 24/7, change or cancel their appointments, and receive reminders of upcoming appointments and other notifications via SMS or email.
- Amelia enables business owners or department managers to track and manage employee schedules and time off.
- Amelia can manage bookings for appointments, book tickets for events, and manage group bookings, all at multiple locations. There are no limits on the number of appointments that can be managed.
- Booking forms can be customized to best serve a business’s needs and match its brand.
Amelia fully supports WooCommerce with PayPal, Stripe, Mollie, and RazorPay payments. Click on the banner to learn more about this time and money-saving plugin.
2. wpDataTables
wpDataTables is a premier WordPress table and chart building plugin that features virtually everything you are apt to need to build any table or chart you want.
Creating a table that is by any definition complex often requires tools that may not necessarily be easy to come by. wpDataTables uses four chart-building engines, one or more of which should suit you perfectly.
They are:
- Google Charts
- Highcharts
- Charts.js
- Apex Charts
For both table and chart building, wpDataTables can connect you to multiple database sources, including –
- MySQL
- MS SQL
- PostgreSQL
wpDataTables can process data that exists in the commonly used formats and features various sorting and filtering options that allow you to create a host of different table types.
Both tables and charts are editable and responsive and, thanks to the wpDataTables conditional formatting feature, can highlight and color-code critical information.
Click to learn more.
3. Site Kit by Google
While your website’s performance might exceed your wildest dreams, it is more likely that there are areas that need improvement before your wishes can be met.
Determining those areas can be a challenge, but Site Kit offers a one-stop solution to deploy, manage, and get insights from critical Google tools to make your site a success by making those critical tools available to WordPress.
They provide:
- stats displayed on your WordPress dashboard from multiple Google tools
- quick Google tool setup without your having to edit your site’s source code
- key metrics and insights for your entire site and individual posts, and
- easy-to-manage, granular permissions across WordPress and different Google products
Site Kit shows you how many people have found your site, how users navigate it, etc.
Click on the banner to learn more about what Site Kit could do for you.
4. Tablesome – WordPress Table Plugin With Form Automation
Tablesome is a WordPress form database and form automation plugin that you can use to store entries from WordPress forms to a database. It can be integrated with popular forms – Contact Form 7 DB, WPForms entries, Forminator database, Elementor Form submissions, etc.
After saving, you can:
- Edit, auto-delete, and export entries to tools such as MailChimp, Google Sheets, Salesforce, etc.,
- Display WordPress form entries on frontend pages
- Automatically export contact data using the Mailchimp WordPress Integration
5. TheDock
TheDock eliminates the need to search for just the right WordPress theme by enabling you to create your own – which can be more fun anyway.
Among TheDock’s many features, a few key ones include –
- A comprehensive, option-rich Design System
- A responsive design system that ensures your site looks great on all screens.
- Designer, developer, and editing collaboration support.
- Clean, readable code.
6. Slider Revolution
Beginners and mid-level designers can sometimes have difficulty finding ways to WOW their clients with professional-level visuals.
Slider Revolution changes all that by bridging the gap between what clients want and what you can provide with its –
- 200 designed-to-impress website and slider templates
- 25+ powerful addons and brand new WebGL slide animations
- ability to import dynamic content from WooCommerce and social media outlets.
7. LayerSlider
More than a simple slider-builder, LayerSlider is an animation and website-building tool you can use to improve any website’s look and feel through eye-catching animations, contemporary graphics, and interactive features.
This is made possible in part through the use of –
- 160+ website, slider, and popup templates
- LayerSlider’s modern and intuitive editing interface
Plus, you can count on professional one-on-one customer support.
8. Download Monitor
The Download Monitor plugin helps you sell your digital products by offering a ready solution for tracking file downloads, gating content to generate leads, build your audience, and ask users for personal information in exchange for valuable content.
Download Monitor lets you –
- add any type of file you need to your website
- link a page to all your channels and promote your social media networks
- place ads – and more.
9. Ads Pro – Multi-Purpose WordPress Ad Manager
The biggest ad manager for WordPress, Ads Pro gives you everything necessary to manage and sell ads.
Ads Pro’s admin panel makes managing ads straightforward for you and your users.
- Key ad features include 25+ ad templates and 20+ ad display options.
- CPC, CPM, CPD billing and PayPal, Stripe, and bank transfer payment methods are built-in.
- Geo-Targeting lets you show/hide ad spaces based on countries, provinces, cities, and Zip Codes.
10. Ultimate Membership Pro
If selling content is your objective, Ultimate Membership Pro is the tool you’ll want to take your website and convert it into a powerful content selling platform.
The Ultimate Membership Pro plugin enables you to –
- Create unlimited subscription levels, including free, trial, and paid member subscriptions
- Control customer access to content based on their subscriptions
- Send emails to welcome new members and send notifications and reminders to regular subscribers.
The WordPress plugin directory is already stuffed with almost 60,000 plugins. This guide has been published to narrow things down to 10 top WordPress plugins for your use.
We consulted with experts to create this list of excellent plugins for WordPress. It can help you with content strategy, SEO, site security, and even social media marketing.
Installing plugins and getting the functionality they provide can add immense value to your use of WordPress.
[- This is a sponsored post on behalf of BAW Media -]
The post 10 Terrific WordPress Plugins You Should Be Using in 2022 first appeared on Webdesigner Depot.
WordPress has made it easy for everyone to launch a blog, but even though launching a blog isn’t a difficult task any longer, driving traffic to your blog certainly is!
In this article, I’ll share some tried and tested strategies that have worked well for my clients’ blogs. You do not have to be an expert or a marketing guru to get traffic to your WordPress website. Follow the helpful tips I share in this article and watch the visitors start pouring in.
Tip 1: Use Powerful Headlines
The first thing related to your blog that a user reads in the search engine results is your article headlines. Of course, nobody wants to click on a boring article title. But a powerful headline stands out from the rest and gets you more clicks.
In most themes, your article headlines are translated into meta titles for the pages. Meta titles indicate the topic of your articles to Google and other search engines.
Tip 2: Build an Email List
Consider offering your visitors a newsletter signup form through which they can subscribe and get notified about new posts on your blog. You can offer them an incentive for free to persuade them to subscribe to your blog. It can be anything from an e-book, membership, useful templates, or an e-course.
Building an email list gives access to the inboxes of your visitors. You can share your blog content with this prospective audience every time you post a new article. This will help you get consistent traffic to your WordPress blog.
Tip 3: Use Free Giveaways and Contests
Free giveaways work as an incentive for your WordPress blog visitors. To offer an entry to your blog’s free giveaway, you can ask your visitors for an email subscription, comment on your blog posts, share it on their social media channels, and ask for other such things.
The trick is to think about the actions of your visitors that will increase traffic to your blog and provide them with one or multiple giveaway entries for such actions.
Tip 4: Optimize For Keywords
All successful bloggers optimize their content for keywords. You need to perform proper keyword research to find sentences and words that your target audience is typing in Google and other top search engines.
Instead of guessing the keywords for your articles, consider using some helpful tools like SEMrush’s Keyword Magic Tool and Google Ads Keyword Planner. This way, you can find the terms people are genuinely interested in and the keywords that do not have too much competition.
You must ensure to choose the keywords that have some excellent traffic volume but, at the same time, have less competition. Such keywords will help in the better ranking of each of your articles.
Tip 5: Optimize WordPress Site Speed
It has been proven that loading time is a ranking factor for SEO, as Google tends to assume that fast sites are high-quality sites.
Signing up for a hosting provider specializing in WordPress guarantees you get the best optimization features for your WordPress site. However, that alone is not enough because you need a hosting provider that can also handle a high volume of visitors.
Optimizing your WordPress website will help in the faster loading of your blog pages. Images are generally the biggest culprit in slowing down your website. So you must first optimize them through an image optimization plugin like Smush, Imagify, or Optimus.
Enabling caching on your WordPress blog will considerably improve its speed. You can store your website data locally with caching, thereby reducing your server load to a large extent. Your website will, therefore, load faster on your visitors’ end, especially when they are repeat visitors.
Tip 6: Take Advantage of Social Media
Try building your presence on some of the top platforms like Facebook, Instagram, Twitter, LinkedIn, and Pinterest. Post multiple times a day on these websites and share your blog articles.
You must also include social sharing buttons with your blog posts to make sharing easier for your audience. It will allow your blog visitors to share your post on different social platforms. This dramatically increases the chances of your blog post going viral.
Tip 7: Internal Linking Strategy
The only key here is to link articles that are closely related to each other. Your visitors might be interested in such related content and read more of your blog posts, thereby increasing your page views. It also increases the chances of visitors sharing your blog content since they find it valuable.
Tip 8: Be a Guest Blogger
Guest blogging involves creating content for other websites for mutual benefits. It helps you establish your authority in the blogging world while attracting more visitors to your WordPress website.
Becoming a guest blogger allows you to spread the word about your blog to a new set of audiences and bring in organic traffic. It expands your work portfolio and helps build or enhance your online reputation.
Tip 9: Pay for Traffic
Consider using Google Ads, Facebook Ads, Microsoft advertising, and other top advertising platforms when paying to bring traffic to your blog. Be aware of your blog audience and use the most suitable criteria to target it.
I’d recommend setting a weekly budget for paid ads and tracking the ad performance at the end of the week.
If you are satisfied with the traffic results, use the same criteria for the next week. On the other hand, if the ad performance is not as per your expectations, try different criteria to reach your target audience.
Conclusion
Getting traffic to your WordPress blog is an incentive for all the hard work that you do in creating content and managing your website. It builds a name for your blog and improves its search engine ranking. All this leads to better user engagement and revenue.
Featured image via Pexels.
The post 9 Ways To Drive Traffic To Your WordPress Blog first appeared on Webdesigner Depot.
The underlying theme of this month’s collection of new tools and resources is development. Almost every tool here makes dev a little easier, quicker, or plain fun. There are a few great tutorials in the mix to help you get into the spirit of trying new things and techniques.
Here’s what is new for designers this month…
Cryptofonts
Cryptofonts is a huge open-source library of icons that represent cryptocurrencies. There are more than 1,500 CSS and SVG elements in the collection. Cryptofonts includes all scalable vector icons that you can customize by size, color, shadow, or practically anything else. They work with Sketch, Photoshop, Illustrator, Adobe XD, Figma, and Invision Studio, and there’s no JavaScript.
Reasonable Colors
Reasonable Colors is an open-source color system for building accessible and beautiful color palettes. Colors are built using a coded chart. Each color comes in six numbered shades. The difference between their shade numbers can infer the contrast between any two shades. The differences correspond to WCAG contrast ratios to help you create an accessible palette. This is a smart project and a valuable tool if you work on projects where color contrast and accessibility are essential (which is all of them).
Chalk.ist
Chalk.ist is a fun tool to make your code snippets look amazing. Add your code (there’s a vast language selector), pick some colors and backgrounds, and then download it as a shareable image. Your code has never looked so beautiful!
WeekToDo
WeekToDo is a free minimalist weekly planner. Improve productivity by defining and managing your week and life easily and intuitively. Plus, this tool is focused on privacy with data that is stored on your computer (in your web browser or the application). The only person who has access to it is you.
Bio.Link
Bio.Link is a tool that collects all your links – from social media to blog posts to any other kind of link you want to share. It’s free to use, includes 15 design themes, visitor stats, and is super fast.
Spacers
Spacers are a set of three-dimensional space characters that you can use in projects. Characters are in multiple poses and ultra high-def formats to play with.
11ty
11ty is a super simple, static website generator. Try it for small projects and read the documentation to see everything you can do with this tool.
Scrollex
Scrollex is a react library that lets you build beautiful scroll experiences using minimal code. You can create scroll animations in all kinds of combinations – vertical, horizontal, almost anything you want to try. The documentation is fun and easy to understand if you’re going to see how it works.
GetCam
GetCam is an app that lets you turn your smartphone into a webcam for your computer. It works with any iPhone and a Mac or Windows computer. It works with most video conference and streaming tools as well as browser-based apps.
Flatfile
Flatfile is a data onboarding platform that intuitively makes sense of the jumbled data customers import and transforms it into the format you rely on. You won’t have any more messy spreadsheets or have to build a custom tool.
Loaders
Loaders is a collection of free loaders and spinners for web projects. They are built with HTML, CSS, and SVG and are available for React and copypasta.
Lexical
Lexical is an extensible JavaScript web text-editor framework emphasizing reliability, accessibility, and performance. It’s made for developers, so you can easily prototype and build features with confidence. Combined with a highly extensible architecture, Lexical allows developers to create unique text editing experiences that scale in size and functionality.
Picture Perfect Images with the Modern img Element
This tutorial is a primer on why the img element is such a powerful tool in your development box. Images are so prominent that they are part of the most important content in over 70% of pages on both mobile and desktop, according to the largest contentful paint metric. This post takes you through how to better optimize and improve core web vitals simultaneously.
Building a Combined CSS-Aspect-Ratio-Grid
Building a Combined CSS-Aspect-Ratio-Grid provides two solutions for creating the title effect. You can define an aspect ratio for the row or use Flexbox with a little flex grow magic. Learn how to try it both ways.
QIndR
QIndR is a QR code generator made for events and appointments. The form is designed to capture your event information so you can quickly build and use a QR code for listings and even allow users to add it to their calendars! It’s super quick and easy to use.
On-Scroll Text Repetition Animation
On-Scroll Text Repetition Animation shows you how to create an on-scroll animation that shows repeated fragments of a big text element. This is a fun and easy lesson that you can use right away.
Eight Colors
Eight Colors won’t do anything for your productivity, but it is a fun game that you may not be able to stop playing. It is a block-shifting game with the goal to shift circular blocks to reach the target given.
Creative Vintage
Creative Vintage is a pair of typefaces including a thin script and vintage slab serif (with rough and smooth styles). The pair is designed to work together for various uses or can be used independently.
Hardbop
Hardbop is a vintage-style typeface with a lot of personality. It would work great for display, and the family includes seven full-style character sets.
Kocha
Kocha is a funky ligature-style typeface perfect for lighter design elements, including logos or packaging. It includes clean and rough versions.
Magnify
Magnify is a large font family with 16 styles and plenty of fun alternates. You can use it straight or with the more funky styles that create less traditional character forms.
Stacker
Stacker is a fun and futuristic style font with a triple outline style. Use it for display when you really want to make an impression.
The post Exciting New Tools for Designers, May 2022 first appeared on Webdesigner Depot.
There are long-standing patterns in design that help us understand what the user wants and which solution will work best. These are referred to as design patterns. This article will explain how patterns help us appropriately construct an interface. We’ll dissect features like buttons, navigation, accordions, and date selection with examples.
This article will be helpful to both new and experienced designers who want to learn more about how to use interactive features and when to use them. If you’ve been in the industry for more than a year, you’ll know that nothing is black and white and that multiple ways can address the same problem depending on the situation.
Buttons
First, consider the following question: which of the buttons depicted in the graphic is better?
The first button will appear to be the obvious choice for many people. Indeed, it is a well-known pattern that most people will recognize; it is the perfect solution for many projects. However, if customers understand the context, they are less concerned with the shape; therefore, there is no need for the designer to think in stereotypical terms. The context or states of a button can demonstrate that it is a button. When we place the cursor at an interactive feature on one website, it turns into a circle. “View” will be written inside the circle. The interface will be less cluttered as a result, and you will be able to clearly show the user that they are dealing with an interactive interface.
Next, which of these two Skip and Sign Up buttons, each with a distinct design accent, is better?
Many people would most likely vote for the first couple. That was something I used to do as well. However, put yourself in the shoes of a user and observe what this interface expects of you. They also want us to collect data at registration, which they emphasize. You can, however, skip this step. Is it up to par? Yes, because many users are hesitant to register on the site and provide personal information. We decide for the user which action is a priority when we show this hierarchy of buttons. But why not let them make their own decision? This is becoming a more prevalent strategy nowadays. For example, we see two identically filled buttons at Nike: Register and Learn more.
Apple uses the Learn More and Buy buttons the same way. The latter isn’t a large red button that screams, “Buy now! Buy now!” The user also can decide what is more important right now.
And here’s another question: if you had to choose between Cancel and Save, which would you put first?
It’s difficult to say whether Cancel should be displayed first or Save. Assume I issue a command. Which is more important: having a button in the interface for the desired action or seeing all of the answer alternatives and then deciding? Designers frequently choose the second choice, but it is unimportant.
According to Nielsen Norman Group research, both the first and second patterns are understandable for customers. Android and iOS are two examples of this, as they use both methods. They all have their own set of benefits.
I enjoy how Apple handles this in macOS. The emphasis is on canceling the action if you are assigned an irreversible task (such as deleting data from the recycle bin). The user must fully comprehend that they cannot retrievd anything they delete.
So, when working with buttons, do the following:
- Determine your task, i.e., what action the constructed buttons should prompt the user to take.
- See if you can demonstrate that the button is a button by looking at its uses in the interface or its states.
- Check to see if the text on the buttons is legible.
Navigation
I’ll also begin the navigation section with an example question. Consider a site’s navigational block and a logo (a circle on the slide). Is it better to put the logo in the middle of the navigation or on the left side?
Both options appear to be equivalent. However, according to various research, the upper left corner is still preferable. There are numerous explanations for this. Because we read from left to right, the logo is the first thing we see. It’s also a marker that tells the user where they came from.
The NNG research center conducted an interesting experiment on this topic. Users were tasked with purchasing a specific item from an online store. At the same time, the list did not include any well-known stores, only local businesses. Some sites’ logos were on the left side of the navigation, while others were in the middle. Commodities were purchased, but the users had no idea what was being tested in the trial. After a while, they were asked for the company’s name from which they purchased the merchandise on the internet. People remembered both the brand and the company name better when the logo was on the left. As a result, having the logo on the left is likely to be significantly better—especially for well-known organizations. Of course, this doesn’t stop a lot of websites from putting their logo in the middle of the navigation box.
Consider a site that displays page links in a burger-style menu. Is it better to hide all navigation in the burger or remove part of the elements and display them to the user?
According to research, it is preferable to highlight a part of the navigation. If you know what sections users visit first, you might be able to show them those sections immediately. However, the user must click on the icon and search through a comprehensive database for specific information. Therefore, it makes sense to expedite this process and immediately provide them with what they require.
This is true not only for mobile interfaces but also for desktop interfaces. In the example below, a directory must be opened independently to be viewed. When the focus of a user’s attention shifts, it irritates them. If a drop-down list displays when you open a menu, users are not always comfortable. After that, it must proceed from left to right, and so on. Therefore, it’s preferable to display the complete menu if possible.
When it comes to navigation, the issue of the menu’s number of items cannot be overlooked. The fewer options a user has, the easier it is for them to decide. It is suggested that 7-9 things are ideal on the internet. However, when there are a lot of sections, subcategories, and sub-subcategories (as in a marketplace), fitting everything into a minimal number of items isn’t always feasible.
There are various options in this instance. There are multiple tiers of menus that can be created. The website of the New York Times is an example. There is horizontal navigation and another burger on the upper left of the home page. A wide menu appears when you click it, with more sections at the bottom and more sections at the top. The fact that the New York Times is a vast resource justifies this. That is why the website’s designers placed the essential items on the horizontal while also indicating that there are other components. The menu is accessed using a button in the upper left corner. If the user is dissatisfied with the primary navigation, this placement enhances the likelihood that they will see the menu and click.
According to the three-click rule, the user must reach the needed information in three clicks. There is, however, no data to back this up. Users today are willing to spend significantly more time looking for information. For example, if we’re looking for a product at an online store, we browse to the appropriate department and then dig further into many subcategories until we find it. Then there’s more filtering, sorting, adding to comparisons, adding to cart, checkout, shipping, etc. This does not appear to fit within three clicks. As a result, don’t limit yourself to this guideline. It’s preferable to keep the navigation simple and obvious so that the user may rapidly reach his objectives.
Perhaps you could divide the interface so that the user chooses from 7-9 categories first, then another 7-9, then another 7-9, and so on till they reach the end. Although you shouldn’t make it too complicated by creating a hierarchy with ten to twenty levels—this is scarcely practical. Five catalog segments, in my opinion, are quite acceptable.
But what if there are a lot of subcategories, and you can’t sensibly divide them into 7-9 items? Here are two basic strategies to assist you: The first is a list of names in alphabetical order. The second point to consider is terminology. This may be seen with Amazon. Take a look at their home decor area, which is organized alphabetically by subcategories. This makes finding things much easier for the user. The essential requirement is that the name be correct and recognizable to the user. You should not use jargon, slang, or professional vocabulary.
In some places, I genuinely admire Amazon’s approach. The creators placed a couple of the most popular subcategories at the top of the list, then let the rest of them go in alphabetical order. This is an excellent solution to the problem because it allows you to display the most popular things first.
Avic follows suit. Apple products account for the majority of the company’s revenue. As a result, breaking up or hiding such products makes no sense; instead, they are removed from the catalog and relocated to the top, increasing the number of categories on the main page. Again, it appears that the user will have difficulty making a decision. However, if Apple is the primary source of revenue, it seems logical to feature this section right away.
The examples considered are based on simple navigation. However, not every task is like this in practice. You might want to do something entirely out of the ordinary in some circumstances. For example, you may have seen a developer’s website in France where you have to use the arrow keys on the keyboard to drive a car that rides between menu items to traverse between sections. This is a rare occurrence, and even though it appears to me to tackle a slightly different problem, it succeeds—and in the process, it generates an environment around the project.
Here’s another example of an impressive menu from the Warsaw Puppet Theater’s website. All navigation is done using symbolic images that appear to be on strings and move as you point at them, much like puppets. As a result, the user becomes more engaged in the navigation game. In the tradition of puppet theater, this approach produces a delightful ambiance.
Go over the following items before beginning to work with navigation:
- Is there anything you don’t want to be seen on the site? If the service is huge, consider how you might make the user’s life easier: alphabetical order, putting critical stuff first, constructing sophisticated breadcrumbs, etc.
- Find a way to display to the user where they are now and where they can go. This is critical because you should always design states for all interactive elements: normal, on hover, active, unavailable, and in the process of loading.
- Determine whether the menu will be anchored at the top and what it will contain. A language switcher, for example, will most likely be located in the top right corner of a bilingual site. Should you, however, remove the option to change the language if the visitor has already begun scrolling down the page?
Accordion
Let’s get to the accordion now. First, let’s look at two different versions of this interface element: one with the chevron pointing down and one with the plus symbol. Which version of the icon do you think is better? Then there’s the question of whether the icon should be placed to the right or left of the text, independent of its type.
According to studies, users recognize accordions and are more likely to click on the text. They click on the icon 25% of the time when it’s on the right and 75% of the time the text it’s on the left. Does this mean there’s no need for the icon to be on the right? No, it’s pretty acceptable to put it there. In truth, it doesn’t matter where we put it; the important thing is that we put it somewhere and make it big enough to click on.
The only difference is that the procedure takes a little longer when you click on the icon. This is because individuals aim and try to click on the icon accurately. As a result, it is vital to create such an element large enough to work with comfortably. I would even propose enlarging the clickable area rather than the icon itself. The project “Dia,” in which the icons are as large as the accordion itself, appeals to me. This site is, I believe, simple and convenient for all users. Each cell is clickable and takes up the entire screen width in this example.
When it comes to the arrow’s direction, you shouldn’t always aim it right. Many users have learned that pointing the arrow to the right indicates heading to another page. Only the tiny area, text, and icon in the example below are clickable, and there is a button at the bottom with an arrow that points in the same direction as the accordion’s equivalent. However, the acts are distinct. When you click the accordion, it will open block down, and when you click the button, you will be redirected to another page. People may be perplexed by this.
Giving the user an accordion with no identifying signs is likewise not good. A person must know which aspect of the interface they are interacting with. You must either use an icon or demonstrate that the element is clickable. The only thing that indicates clickability in the example above is the changing appearance of the cursor when hovering over the text. However, it is not visible; it must be larger, or a term such as “Read” should be used. Without that, the user won’t be able to tell the accordion apart from the bold text selection.
As I previously stated, you must think out all interactive features in terms of states. If there was a positive, for example, it should change—or at least become a minus. As a result, the user will realize that the drop-down box can be hidden.
It’s inconvenient when the icon vanishes after you click on it. The user anticipates being able to close the block at the exact location where they first opened it. After all, they may not like the response that appears and may want to delete it right away. He’ll have to re-aim now that the button has been repositioned. Here’s an unusual example of an accordion plus that isn’t clickable. This is only true for mobile navigation. If the user has previously dealt with the desktop version, they may not recognize what’s wrong and believe it’s a bug when switching to the mobile version.
Imagine you’re charged with deciding whether to keep the open items or conceal them when the user opens others. On the one hand, if the items don’t shut, the symbol will not move because no items are transferring. On the other hand, if there is too much text, the user may have trouble navigating to the following question. As a result, it may be preferable to close superfluous blocks automatically. However, consider the number of responses in a specific accordion.
The accordion is a multipurpose element. Not only may it be utilized for the FAQ area, but also the checkout page. According to Baymard, more than 30% of online retailers worldwide accept payments through accordion-style checkouts, with the percentage in the United States being considerably higher at 56%.
This solution has several benefits. The user can first view the following steps to complete (say, which payment systems are accepted). You don’t even have to click “Next” or navigate to another website to accomplish this. Second, the accordion makes it simple to navigate from block to block to check data without having to reload the page and risk losing it. After all, if the user made a mistake in the first area and discovered it in the second, it’s simple to correct it here. You’d have to return to the previous page in a typical checkout and risk losing the information you’d filled out but hadn’t sent to the server.
You can also use an accordion to create menus. However, you must exercise caution in this situation. The parent accordion category in the example below has no content. As a result, if you repeatedly click on the items to collapse the accordion, the entire content area remains empty. In this situation, it’s also a good idea to include some information in this page section.
The fantastic, beautiful accordion on hover is another example. It is quite adaptable. Although there is no accordion in the mobile version, it is essentially just banners that translate to other links.
Another more extreme example created by evident admirers of such a solution is an accordion within an accordion. The entire site can be navigated using these blocks. It’s amazing.
In mobile interfaces, accordions are also essential for website design. They make it simple to conceal information. All navigation on The Guardian’s website is done through these blocks. The only thing that bothers me is that the parent categories aren’t clickable. A user does not have the choice of seeing all of the sports news. Only the subcategories “Football,” “Cricket,” “Rugby,” and so on are available. On the other hand, The Guardian has moved the parent categories on the front page, which is a reasonable answer to such an issue.
The Wall Street Journal, on the other hand, took a very different approach. They didn’t post the categories on the main page and instead crammed everything into a single block. When a user visits a category, however, there is the Main section. This allows you to navigate to the main parent section or a specific subcategory.
Let’s summarize the accordion:
- Always ask yourself from the start if you really need an accordion. After all, the user’s “fee” is the click. You can sometimes get away without it and supply all the information at once.
- Consider which icon to use. It can be anything, but the most important thing is that it is simple to use.
- Where should the symbol be placed? It is highly dependent on how everything adapts. For example, if you have a long line, it is preferable to set the symbol on the left. Then, you won’t have to worry about the icon vanishing when you collapse the accordion into a small block and shift the text to the following line.
- Choose whether all blocks are closed by default or the initial block is left open. This is dependent on your task and the aims of the user.
Date
The choice of date is the next crucial factor to consider when discussing design patterns. I’ll begin with a comparison, as is customary. Users of iOS 14 who have set the alarm clock time will be familiar with this scenario. What is the better option?
I like the first choice since it is more attractive and does not distort the font as much as the second. However, the first variant has a potential issue: it is difficult to modify and twist. After all, the space is limited, and the user must fit precisely into the spot. It’s worth noting that Apple decided to leave both alternatives open.
Consider what you’ll use the Date Picker for a while you’re creating it: a date range for booking hotels or planning excursions, a date to set a birthday or reminder, a date to indicate the time for a movie session, or for ordering a cab. This will impact the rest of the process of envisioning and designing this feature.
It’s critical, in my opinion, to describe the many ways in which the user obtains information right now. The four options are a calendar, a drum (more of a mobile solution), a conventional input area, and a drop-down list. Let’s look at a few distinct solutions that all deal with airline tickets. Wizz Air, for example, utilizes a calendar, but it’s a double one so that the customer can see two months at once.
But, if so, which start date should be specified? It seems it should be the next day, and the website shows this. However, studies have shown that users are not always happy when a date has already been set. People rarely purchase next-day plane tickets. Therefore this “default” setting will almost certainly need to be modified.
Qatar Airlines went even further by announcing a start and end date. Today is the first day of the program. Is that choice required if the user logs in at 23:58? The second issue is that there is no differentiation between the start and end dates and all days in between. Everything is painted in the same hue. Users want to see anchors for dates if they plan a long trip that begins in one location and concludes in another. People are used to being told that we begin and end at specific places. As a result, the user can be certain that the dates are correct.
Today, UIA puts both the departure and return dates on the calendar. We’ve already established that this isn’t ideal. It’s also challenging to select a destination because you have to first click on the list, then go to the dropdown, search for the country, etc. It’s a long and winding road. But, it appears to me that the main blunder is something else. The search results output is blank. If I select two destinations and dates, I may be informed that that destination has no available flights. If I go on to the following date on the calendar, there are no flights available. Overbooking is the only method to find out when they will arrive. I’m likely to use a third-party aggregator that gathers data from numerous airlines straightforwardly and conveniently.
SkyUp’s calendar is one of my favorites. It includes large fields that open up a large calendar, and it’s simple to set the trip’s start and end dates. It indicates days when there are no flights for a specific location, and you can view the price for each ticket right away. This is quite useful because it allows you to choose a day and a flight even before you click confirm.
Let us now turn our attention to the drum. You can enter nearly any information into such an element, including time, date, and other lists. Users may easily navigate this tool and jump between values.
The input field follows. We must consider the format if we allow the user to enter a date using the keyboard. For example, in different regions of the world, “12.10.2021” may be interpreted differently: for some, it may be October 12, while for others, it may be December 10. This is especially significant in the case of the following example site for renting a car in another country. The user must be aware of the format they are dealing with. In this circumstance, several experts advise that the user writes in text. However, there is the issue of localization: would the system recognize that the language is not global English but rather a more non-standard language? After all, the user can use abbreviations when writing. You must either instruct the user on how to do it or use other solutions, such as placing a calendar icon next to it. In this method, the user controls how the data is entered.
If the drop-down list is modest, such as months, there is nothing wrong with it. However, you may accumulate an excessively long list over time. Consider the website Ukrzaliznytsia. The time limit is one hour, and there are 24 items on the list. Perhaps a mixed approach is best here, where the user enters a few digits and then selects from a list.
This is precisely the approach used in Google Calendar. If you start writing 16 in the input box, the sub-options appear at 16:00, 16:15, 16:30, and 16:45 (according to the system’s set step of 15 minutes).
Let’s summarize calendars:
- When creating a calendar, remember to figure out what format the date will be in, as well as localization, language, and how to define where the day and month will be.
- It’s worth noting that the start of the week varies by region and personal preference—in some cases, it’s Sunday rather than Monday.
- Figure out whether the fields should have some default value if they are going to make sense to users or leave everything blank at the start.
- Decide if unavailable days should and can be shown. In some cases, there may be technical limitations here. I’ll refer you to the examples mentioned above. SkyUp may not have many flights, and Qatar Airlines has an order of magnitude more. Because of this, it is not always possible to pull flight information to the calendar before the user sends a request to the server.
- Determine whether the next entry step should be opened automatically. For example, for Wizz Air, after filling in the departure date, the field for the end date will open automatically, while for UIA, you need to click the field again for the second date.
- What to give the user first: the date or the time? Let’s say you want to sign up for an English course. You have certain working hours, and you want to get to classes before or after them, any day suits you. What is the primary goal: to allow a person to enter the time and then show the available days for a given schedule, or do otherwise? That brings up another question: how do you show selected and unavailable days or other labels? For example, in Google calendar, everything is well separated by color tags: events, public holidays, invitations to events, etc. But in this scenario, you need to think about the possibility of creating a legend that describes all the tags you’ve created.
Remember: Design Patterns Must Solve the User’s Problems
If you summarize everything above, the main recommendation is simple: before applying any design patterns, make sure you know what tasks the user should complete and how to solve them. Based on this, you can build an interface with gorgeous and, more significantly, human-friendly buttons, navigation, accordions, dates, and other features.
The post Design Patterns: How to Create Simple Interfaces first appeared on Webdesigner Depot.
Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.
The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!
Tailwind Fast Started Template
Are these the Worst Logos of 2022 so Far?
5 Open Source Tips to Reduce Waste in Web Design
Introducing Material Symbols
Should I Use a Carousel?
What’s Coming in WordPress 6.0 (Features and Screenshots)
20 Best New Sites, May 2022
Choosing a WordPress Website Builder and Why You Should Use One
What if Our Sliders Actually Slid?
A New Future for the Interface
6 Web Design Trends to Look Out for in 2022
The Best Free Tailwind CSS Components for 2022
The post Popular Design News of the Week: April 25, 2022 – May 1, 2022 first appeared on Webdesigner Depot.
Acquiring a new customer is difficult, but retaining an existing one is even more challenging. Yet, statistics show that efforts focused on retention bring way more value.
For instance, according to SmallBizGenius, 82% of companies agree that customer retention is cheaper than acquisition. Apart from that, 65% of a company’s revenue comes from existing clients, and increasing the investment in retention by only 5% already gives you a boost in profits by 25% to 95%. Impressive, right?
So what should you do to reach such results?
One component that impacts brand-client relationships is website design. This article will give you three design tricks that will encourage your customers to come back to your site more and more.
1. Rethink Your Website Structure
It is hard to imagine a website visitor who would spend more than five minutes (usually it’s way less) trying to figure out the navigation system on your website. If you have a loaded, complex site structure, you will not retain a customer.
Take Craigslist, for instance. Its navigation is not user-friendly, not to mention that it took over 30 seconds to load when the acceptable average load time should be no more than 1.7 seconds:
Here’s what proper website navigation presupposes:
- Subordination should not go deeper than three levels.
- A website should include eight horizontal categories max.
- The structure should be symmetrical.
- The menu should not be overstuffed with too many locations.
Since we mentioned Craigslist, let’s take a look at its competitor AdPost, which has a better website structure:
Instead of listing all the product categories on the front page, like Craigslist, AdPost added them to the search menu, thus making the design more user-friendly and making the navigation cleaner.
2. Make Your Site Multilingual
If you have visitors coming to your website from around the world, you should not assume they know English. A survey by Weglot found some interesting results regarding the attitude of buyers to shopping on international websites:
- 52% of websites are in English, but English reaches only 25% of global users.
- 56% of visitors say the website information in their language is more important than the price.
- 73% of customers say they prefer to shop on sites in their own language.
So, there is no doubt that having your website localized to several languages can increase customer retention, especially considering the last stat.
To understand the proper practices of making a website multilingual, look at the examples of the best language learning apps. For instance, Preply has a drop-down menu where you can choose from multiple language options, including Polish, Ukrainian, German, and many more:
Translating your website to different languages will help the visitor understand the value of your product better. However, before you invest in localization, make sure you study the data on customer behaviors to understand which languages your audience speaks.
3. Invest in Custom Illustrations
Some companies don’t bother much with designing their websites, especially when it comes to custom elements, such as visuals. However, research has shown that the focus on branding in website design increases customer commitment and e-loyalty, as a result.
Moreover, in the world of billions of websites, you need something that would help your business stand out. And custom illustrations are among those features that contribute to your site’s uniqueness.
Just take a quick look at the Emiozaki Web site. It includes personalized illustrations and animation created in the form of a tablet that substitutes the navigation menu:
This website reflects the brand’s tone and style, and animation adds emotion to UX. Apart from that, it’s also an excellent example of structuring a website.
Or, if you would like an example of a less loaded design, take a look at this personal portfolio by Victoire Douy. It also includes animations that add interactivity to the design. For instance, you can play with the shadow of the girl’s hand:
So, if you want your website to attract more customers and encourage them to hang out for longer, take the creative approach. Hiring an illustrator is, of course, costly, but it will help your site stand out.
Wrapping Up
As you can see, you’ll have to put in a lot of work to bring forward website design that increases online customer retention. You just have to employ our three best practices. Let’s quickly recap them:
- Rethink your website structure; it should make the navigation easier.
- Consider making your site multilingual; you’ll retain more international visitors.
- Invest in custom illustrations to help consumers differentiate your brand from your competitors.
The post 3 Quick Tricks to Boost Customer Retention first appeared on Webdesigner Depot.
Whether you are a designer looking for the best themes for your clients or a new website/blog owner, there are numerous theme marketplaces to cover your needs.
CMS (content management systems) like WordPress, Shopify, and Wix offer built-in theme collections. But there are also trusted third-party marketplaces for themes.
Most beginners are pretty overwhelmed when it comes to choosing a website theme. With thousands of themes to choose from, this is more than understandable. In this article, we will first highlight all you need to consider before selecting a template/theme for your website.
By the end of this 5-minute read, you will also know which are the best third-party and CMS-based marketplaces for both free and premium themes.
How to Choose the Best Theme for Your Website
You might consider many parameters when choosing a theme for a blog or website. To narrow down the options and find a theme that suits your needs and preferences, you can:
- Make a list of the features you need (integrated page builder, SEO optimization, browser compatibility, translation capability, number of columns, etc.).
- Pay attention to responsiveness — nowadays, you should opt for mobile-friendly themes only.
- Opt for lightweight, simple themes — such templates are usually more powerful as they do not affect the speed of your website.
- Make sure that the theme has the visual appearance you want — find the themes that match your branding elements (colors, logo, industry, etc.).
- Keep readability in mind — a font that is difficult to read will affect readability (especially on mobile devices) and ultimately hurt your website traffic.
- Test the themes before you start customizing them — even (most) premium themes offer a trial period, which you should take advantage of; it will save you time and money.
Following these simple steps will ensure that the theme you choose will benefit your website in the long run. Now that we have analyzed that let us look at the best places to find themes in 2022.
5 Best Third-Party Theme Marketplaces
1. ThemeForest
If you are looking for a comprehensive list of premium themes, ThemeForest from Envato is just what you need. The marketplace offers thousands of pre-built templates and themes for pretty much everything: from responsive WordPress themes to the best-selling templates for eCommerce websites on platforms like Shopify.
2. Creative Market
Although ThemeForest offers a vast selection of themes, Creative Market is simply the best choice for non-WordPress themes. The platform includes an analytic filter section to select the CMS you use, file type, price range, and much more.
Tumblr, Drupal, Bootstrap, and Joomla are just a few examples of the specified templates available.
3. Template Monster
The same goes for our next suggestion, the Template Monster website. This third-party marketplace offers some of the best themes, plugins, and graphics that you can use to improve the look and performance of your website. From WordPress and WooCommerce templates to themes created for the Shopify platform, nothing is left out.
4. StudioPress
StudioPress marketplace allows you to find the best theme for your website through a comprehensive sorting feature. You can sort your search by your niche, the features you need, the layout (columns), and the template’s developer. Even though StudioPress offers its own theme (Genesis Pro), the marketplace also includes numerous third-party themes.
5. CSSIgniter
Our final third-party provider is CSSIgniter, one of the most well-known marketplaces for WordPress website owners and developers. This site offers demos for numerous themes, from minimalist, very popular templates (especially for blogs) like Olsen to comprehensive WooCommerce themes like Amaryllis.
This way, you can try out the premium themes before choosing one that suits your needs. Note that CSSIgniter only offers themes for the WordPress CMS.
5 Best CMS-Based Theme Marketplaces
1. WordPress Themes
Although all third-party marketplaces mentioned above offer a wide selection of premium themes, it can be challenging to find free themes for your website. If that’s what you are looking for, there’s simply nothing better than WordPress’ built-in theme marketplace.
The WordPress marketplace contains more than 4,000 free and premium themes for you to choose from.
2. Shopify Themes
According to statistics, Shopify is the second most popular CMS, after WordPress. So, it should come as no surprise that the eCommerce platform has an integrated marketplace where you can find numerous free and premium themes.
So, if you are looking for a beautiful template for your Shopify-based store, you should check out the Shopify platform first.
3. Wix Website Templates
Like WordPress and Shopify, Wix has had a marketplace for themes since day one. Keep in mind that when you build your site through Wix, you do not have as many options for finding third-party themes as you do with WordPress. Still, you can find many premium and free themes on the Wix website to solve this problem.
4. BigCommerce Themes & Templates
BigCommerce is one of the most popular CMS on the market, tailored for professionals. On the website, you can find numerous free and premium themes, and you can find the best one based on your industry.
5. Squarespace Themes
Last but not least, we have Squarespace’s official theme marketplace. With a comprehensive filter section, it’s straightforward to find a great theme on Squarespace. If your website or blog is built with Squarespace CMS, there is nothing better than this.
Wrap Up
Of course, the list of places to find themes for your website in 2022 could go on forever. But if you know what you’re looking for in terms of layout and features, choosing the best theme will instantly become easier.
Besides, the providers mentioned above prove the most trustworthy and offer the variety you need for your final selection.
You should probably look at third-party marketplaces like ThemeForest and Creative Market if you need a premium theme. On the other hand, CMS-based theme marketplaces are the best option for those who are looking for the best free themes.
The post 10 Best Places to Find Website Themes in 2022 first appeared on Webdesigner Depot.
Ask any seasoned web app developer about their choice of programming language, and they are sure to mention PHP. PHP is a widely-used general-purpose scripting language that is especially suited for Web development and can be embedded into HTML. As per Builtwith, 3,090,319 live websites are still using PHP. However, when it comes to developing massive projects without lag or stability issues, developers tend to use frameworks, and PHP has two remarkable frameworks: 1) Laravel and 2) Yii. Both frameworks have a lot of followers in terms of full-grown communities globally, and there may be questions arising about which to choose.
What Are Laravel and Yii?
Laravel is a simple PHP framework frequently used for web-based or web application development initially created as a better alternative to Codeigniter. It is known for MVC Support, articulated ORM systems, reliability, modularity, and uncomplicated coding rules. Some of the key features of Laravel Framework are:
Whether you are looking for comprehensive tutorials on UX design or professional courses on topics like logo design, video or photo editing, there’s the perfect YouTube channel for you as a designer.
The best thing about YouTube is that you do not have to be a professional to jump into a video tutorial and gain the knowledge you need. There are many people who have become experts in, say, Photoshop by watching many hours of YouTube videos.
In 2022, there are established and emerging channels that you, as a designer, can use to get inspired and fix problems in your workflow.
Let us take a look at our 14 favorite YouTube channels for designers:
1. Will Paterson
Subject: Logo design, hand lettering, Illustrator tutorials
Subscribers: 608K
Creator: Will Paterson
Are you looking for a YouTube channel that will help you improve your logo designs and entertain you at the same time? If so, Will Paterson is the channel for you. Whether you are a professional designer or a beginner, this channel has everything you need: from logo design and Illustrator tutorials to product reviews and vlogs; nothing is left out.
2. Arnau Ros
Subject: Web design (UI, UX), Freelancing, Figma tutorials
Subscribers: 7.7K
Creator: Arnau Ros
In about a year, Arnau Ros has managed to become one of our favorite YouTube channels. In a few words, Arnau is a very talented freelance product designer. He has published numerous videos on how to use Figma, one of the most popular problem-solving platforms for designers.
And that’s not all. Arnau has created a series of videos that will help you get started in the world of freelancing from scratch as a new designer.
3. Adobe Photoshop
Subject: Photoshop tutorials
Subscribers: 618K
Creator: Adobe
Although there are numerous YouTube channels that offer top-notch Photoshop tutorials, the official Adobe Photoshop channel should not be underestimated. Adobe has created a quick start guide for most Photoshop features, toolboxes, etc. So if you need to quickly complete a task in Photoshop, this is the perfect channel for you.
4. Satori Graphics
Subject: Freelancing, Graphic design guides (fonts, plugins, techniques, etc.)
Subscribers: 884K
Creator: Tom Cargill
From career development videos to poster and type designs to workflow tutorials, Satori Graphics has it all. We highly recommend this channel for beginners and designers who want to master Illustrator and create a top-notch portfolio for their design work.
5. Hello, I’m Alexa
Subject: Freelancing, UX design, vlogs
Subscribers: 23K
Creator: Alexa Herasimchuk
Alexa’s YouTube channel is a great choice if you are a UX designer and want inspiration. What we love about Alexa is that her channel covers everything a UX and product designer needs to know. Be sure to check out the fascinating video discussions with other designers that she has uploaded.
6. Mt. Mograph
Subject: 3D animation, motion graphics guides, Adobe After Effects
Subscribers: 277K
Creator: Mt. Mograph co.
For more than 3 years, Mt. Mograph has been one of the most popular YouTube channels for graphic designers. The channel is especially popular among creatives who want to learn more about 3D animation, geometric motion, and need the best After Effects tutorials.
7. Swerve Tutorials
Subject: Photo editing, motion graphics
Subscribers: 167K
Creator: Swerve
Swerve has created some of the most comprehensive how-to videos for Photoshop, Illustrator, and Motion Graphics. The channel’s speed art videos are extremely inspiring. Even though the channel is not constantly updated, it already contains many videos that you should definitely watch.
8. Tutvid
Subject: Graphic design software (Illustrator), Photo and video editing (Photoshop, Premiere, Lightroom)
Subscribers: 1.19M
Creator: Nathaniel Dodson
Tutvid needs no introduction. With more than 1 million subscribers, this has been one of the most popular YouTube channels for creatives for years. When it comes to tutorials about Adobe Creative Cloud software, nothing beats this channel.
If you are looking for comprehensive tutorials on Adobe Photoshop, Illustrator, Lightroom, and Premiere, Nathaniel Dodson is your man.
9. CharliMarieTV
Subject: Freelancing, web development, chats and vlogs
Subscribers: 209K
Creator: Charli Prangey
If you are not yet familiar with the digital nomad lifestyle, be sure to check out the CharliMarieTV channel. Charli is a freelance web designer and entrepreneur who has created some of the best videos on website design, coding, remote work, and more.
10. Canva
Subject: Canva tutorials
Subscribers: 126K
Creator: Canva
Canva is a popular web-based graphic design platform. Like the official Adobe Photoshop channel, this is the best way to quickly learn how to use Canva software. In addition to quick tutorials, this channel includes videos with all the important software updates and in-depth Canva workshops.
11. Every Tuesday
Subject: Graphic design guides for Procreate
Subscribers: 345K
Creator: Teela Cunningham
When it comes to Procreate tutorials, there’s nothing better than Every Tuesday. The channel has different playlists for beginners, intermediate and professional creatives. From hand lettering projects to watercolor flowers to digital gouache, you’ll find everything you need to master Procreate on Teela’s channel.
12. Zimri Mayfield
Subject: Logo design tutorials, vlogs, logo redesign
Subscribers: 437K
Creator: Zimri Mayfield
Those of you who love logo designs probably already know all about Zimri Mayfield’s channel. Professionalism and a great sense of humor are combined in one of the most inspiring YouTube channels for designers.
13. Yes I’m a Designer
Subject: Adobe creative cloud tutorials
Subscribers: 517K
Creator: Martin Perhiniak
As a certified Adobe design master and instructor, Martin Perhiniak has created a must-follow channel on YouTube. From basic Photoshop and Illustrator tutorials to advanced masking tutorials, you’ll find it all at Yes I’m a Designer.
14. Roberto Blake
Subject: Adobe tutorials, brand/business development
Subscribers: 549K (as of March 2022)
Creator: Roberto Blake
If you are looking for something more than graphic design tutorials, our last suggestion is perfect. Roberto Blake has created numerous Photoshop, Dreamweaver, Illustrator, and Indesign tutorials, but also gives numerous talks and shares his knowledge on video marketing and brand development.
Wrap Up
Although there are numerous YouTube channels for designers, these are our absolute favorites. Of course, that does not mean there are not more equally successful and inspiring designers on YouTube. Made by Mighty, Sketch Together and Ch-Ch-Check It are just a few more examples of great YouTube video creators if you search for a specific topic.
Featured image via Unsplash.
The post 14 Best YouTube Channels for Designers in 2022 first appeared on Webdesigner Depot.