Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

September 25 2019

20:06

How to Use the Slider Revolution Plugin for WordPress

In this post, we’re going to review the Slider Revolution Responsive WordPress plugin which allows you to create rich and dynamic content on your WordPress websites. nd not just sliders: it allows you to build carousels, content modules and full fledged websites by using the rich built-in editor!

Nowadays, sliders and carousels are important building blocks of any website. Specifically, when it comes to pitching a new idea or a campaign, sliders are one of the best ways to highlight it and attract new visitors. As a WordPress site owner, you would like to have a plugin which allows you to create high quality sliders and carousels without much hassle.

There are thousands of extensions and scripts available for creating sliders and carousels on your WordPress website. And of course, you’ll also find commercial options that provide ready-to-use features and extended support. In the case of commercial options, you should also expect quality code, bug fixes, and new enhancements.

Today, we’re going to discuss the Slider Revolution Responsive WordPress Plugin, available at CodeCanyon for purchase at a very reasonable price—especially considering the number of features it provides. It allows you to create a very high quality web content:  sliders, carousels, hero headers and a lot more. It also comes with a built-in powerful visual editor which allows you to create full fledged websites in no-time. Considering the features it provides, it’s a must-have tool for site builders!

Let’s quickly go through the important features Slider Revolution brings:

  • new visual editor
  • media asset library
  • more than 200+ templates
  • more than of 20+ add-ons
  • sliders, carousals, hero headers and content modules
  • special FX support by add-ons
  • supports customization
  • and many more

The Slider Revolution Responsive WordPress plugin provides a plethora of useful features that allow you to set up modern designs on your WordPress websites quickly and effortlessly. Throughout the course of this tutorial, we’ll explore the different features provided by this tool. We'll also go through the process of creating a new slider from scratch.

To start with, we’ll see how to download and install the Slider Revolution Responsive WordPress plugin from the CodeCanyon marketplace.

Installation and Purchase Code Registration

In this section, we’ll see how to install and configure the Slider Revolution Responsive WordPress plugin once you have purchased and downloaded it from CodeCanyon. For this post, I’ve used WordPress 5.2.3, and the Slider Revolution Responsive WordPress plugin version is 6.1.2. I would recommend that you install it if you want to follow along with this post.

As soon as you purchase this plugin, you’ll be able to download the revslider.zip file. It’s the WordPress plugin file which you could use to install this plugin from the WordPress admin side. So go ahead and follow the standard WordPress plugin installation process and you’re almost done.

Next, we need to register the plugin’s purchase code and that should unlock access to:

  • 200+ premium templates
  • 25+ add-on plugins
  • 2500+ free images, videos and icons
  • 100+ pre-made layers & animations
  • instant plugin updates
  • premium ticket support

Firstly, you need to retrieve your purchase code from the codecanyon.net/downloads section. Click on the Download -> License Certificate link and that should get you a text file which should contain the item purchase code.

Once you get the purchase code, click on the Slider Revolution link in the left sidebar on the admin side of your WordPress site and it should display the plugin dashboard page. On this page, click on the Activation link and enter and register your code. With that, you have unlocked the full power of Slider Revolution.

How Do I Use the Slider Revolution Responsive WordPress Plugin?

In this section, we’ll briefly discuss the possible ways one could use this plugin. The Slider Revolution Responsive WordPress plugin is mainly used to create three types of content on your WordPress site: sliders, scenes and carousels.

Let’s quickly go through each type to understand difference between them.

Slider

Generally, a slider consists of multiple images or slides. Each slide has its own content and user can navigate between different slides by using the navigation elements.

In the context of this plugin, a slide is not just an image, but it could be anything: text, image, video, audio, or something else. In fact, Slider Revolution allows you to create different layers in your slide to add different elements. If you have used Adobe Photoshop or similar software, you know how important and useful this feature is. In fact, when you open the slide editing UI, it’s hard to believe that it’s a web based UI. It feels like creating content in professional image editing software!

Scene

In the terminology of this plugin, a scene is just another type of slider, but with a single slide. Thus, it won’t have navigation elements like in the case of a slider, which allows user to navigate between different slides.

The main purpose of the scene type is to create rich content modules that you could embed at different places on your page. You’ll have the same set of customization options available while editing a scene that you get while creating a slider. Thus, you could set up your scene content with many kinds of media and layers.

Carousel

The carousel type allows you to create content in the same way as that of the slider, but it allows multiple slides to be visible at the same time. This is really useful when you want to combine more than one slide in a single frame.

How to Set Up a Slider

In this section, we’ll build a real-world example to demonstrate how to use the Slider Revolution Responsive WordPress plugin to create sliders on your WordPress site.

Before we proceed, make sure that you have installed this plugin in your WordPress site if you want to follow along.

Go ahead and access the Slider Revolution link in the left sidebar on the back-end. That should present you the different options as shown in the following screenshot.

Slider Revolution dashboard

In the terminology of the Slider Revolution plugin, everything is a module, whether it’s a slider, a carousel or a scene. You could create a new module from scratch, reuse an existing template module, or import one from a file. In our case, we’ll create a new module from scratch, so click on the New Blank Module link.

In the next screen, it should ask you if you want to go through the help guide or straight away start editing. In our case, we want to start editing right away, so click on Quit Guide. That should present you the following UI to create a slider.

Create a New Module

As you can see, it’s a pretty rich interface and provides plenty of customization options—just like professional image editing software!

By default, it already creates the first slide for you. As discussed earlier, you can add any time of content to the slide. In our case, we’ll add image and text to the slide. Go ahead and access the Image > WordPress Library menu and add an image from the WordPress library as shown in the following screenshot.

Insert an Image

Once the image is added, you can use the configuration options in the right sidebar to adjust image related settings. You can add different types of content in the same slide by adding layers to it. So for example, if you want to add text along with the image, you need to add it as shown in the following screenshot.

Insert Text

You can use the drag-and-drop feature to position your layers and adjust it.

Drag and Drop Editor

Once you’re done with the slide configuration, click on the Save button at the bottom right.

To add a new slide, click on the Add Slide(s) > Blank slide as shown in the following screenshot.

Add New Slide

Go ahead and add as many slides as you want to add and configure it. Finally, when you’re done with the slider, you’ll need the embed code to integrate it in one of your pages. On the main plugin page, you can click on the Embed button in your slider to get the embed code as shown in the following screenshot.

Embed Button

And that should present you different options you could choose from to embed the slider:

In my case, the preview looks like this!

So that’s how you can create sliders. The process is pretty much similar even if you creating carousels or scenes. Although, we’ve just discussed sliders, this plugin is capable of doing a lot of amazing things. The more you explore it the more you’ll love it!

The Next Step: A Quick Look at a Couple of Other Slider Scripts

If you're looking for more advanced slider scripts that you could use right away, I recommend that you check out the following post, which summarize some excellent scripts that are available for a reasonable cost.

  • WordPress
    10 Best WordPress Slider & Carousel Plugins of 2019
    Nona Blackman

Conclusion

Today, we reviewed the Slider Revolution Responsive WordPress plugin available at CodeCanyon. It allows you to create dynamic and rich content on-the-fly in your WordPress site. In this post, we’ve barely scratched the surface of features this plugin provides.

I’m sure you’re convinced that the Slider Revolution Responsive WordPress plugin is a powerful plugin to create dynamic and rich content on your website. Although it’s a commercial plugin, I believe it’s fairly reasonably priced considering the plethora of features it provides.

If you have any suggestions or comments, feel free to use the feed below and I’ll be happy to engage in a conversation!

  • WordPress
    10 Best WordPress Slider & Carousel Plugins of 2019
    Nona Blackman
  • WordPress
    How to Add a Slider to WordPress With a Free Plugin
    Monty Shokeen
  • WordPress
    What Makes Slider Revolution the Best WordPress Slider Plugin?
    Lorca Lokassa Sa
  • WordPress
    Best Ways to Create an Image Slider for WordPress
    Kyle Sloka-Frey

19:53

iOS Mobile App Templates for Directories and Classified Apps

What do Yelp, Angie’s List, Craigslist, TripAdvisor, and Amazon have in common apart from being very popular?

They are directory websites and mobile apps where you can buy products and services from the convenience of your mobile devices! 

Directories are among the most popular and most profitable websites. They list thousands of products and services for users to browse. They also deliver information based on location and category. 

Many directories have their own mobile apps and this is why: 

  • 75% of users have mobile devices as their primary way to get online. 
  • 80% of searches conducted on mobile devices result in a sale. 
  • 90% of mobile users spend more time in apps than on the web. 

These are important statistics to keep in mind if you are thinking about starting a directory website and mobile of your own.

However, building a custom directory mobile app can be a massive and expensive undertaking. Here is where mobile directory app templates come in. They are the best and cheapest option for creating a mobile directory map. The template developers have thought of just about anything a directory website will need, so you don't have to code it yourself. 

  • WordPress
    10 Best Directory Plugins for WordPress
    Lorca Lokassa Sa
  • iOS SDK
    Jump-Start Your Mobile App With an iOS App Template
    Lorca Lokassa Sa
  • iOS SDK
    17 Best iOS App Templates of 2019
    Nona Blackman
  • iOS
    10 Best iOS App Templates for Business
    Nona Blackman

In this article we’ll focus on mobile directory app templates for iOS, an operating system developed and supported by Apple which only works with Apple devices: iPhones and iPads. 

I’ll show you some premium mobile directory templates for iOS available on CodeCanyon. 

Understanding Directories and Mobile Directory App Templates 

Starting your own online business has never been easier. There are many resources to help you succeed. You have built-in technical and information infrastructure to help your idea off the ground as fast as possible. You also have a built-in audience that is easy to reach. In addition, starting costs are very low. You just need to invest your time. 

If you’re looking to start an online business, directories are popular and profitable. 

What is an Online Directory? 

An online directory lists products and services for users to browse. It is a database that delivers information based on location and category. 

Here are some common characteristics of directories: 

  • Directories contain a large number of listings under different categories. 
  • Directories provide tools like searching, filtering, pictures, location information with maps, product information, contact details, and more.
  • Directories are curated listings. 
  • Directories are community driven. 
  • Directories are built on user-generated content. 
  • Directories generate a lot of traffic! 

Some directories are public: for example to help customers find store or business locations, or to list the names of doctors and their specialties. On the other hand, some directories are private for the internal use of a business or organization. 

Types of Directories

Directories come in all sizes and shapes: complex, simple, local, national, global, or niche. If you want to start a mobile directory app, the best place to begin is identifying a niche in your local area. These examples should give you some ideas:

  • classified ad listings 
  • lists of coupons and deals—e.g. Groupon
  • business listings—e.g. Yellow Pages
  • job listings
  • event listings 
  • real estate listings
  • automotive guide 
  • hotel and restaurant guide
  • city guide or local directory
  • travel websites
  • video directory—e.g. YouTube or Vimeo
  • web link directory

What Do the Above Examples Have in Common? 

You can build a mobile app for any of these directories. Through the mobile app you can also earn money by:

  • displaying advertisements
  • charging listing fees—normal listings and featured listings
  • membership subscriptions 
  • booking and reservation (because users trust directories and prefer to do the booking and reservation through them)

Why Do You Need Mobile Directory iOS App Templates? 

People spend much more time online on mobile apps than on the web. Because of this, most successful directory businesses have taken advantage of apps to reach vast audiences where they are. A mobile directory app template allows you to build your own directory app.

Developing a mobile directory app from scratch is a costly and time-consuming process. Not every business has the deep pockets to foot the bill for such a lengthy and involved process that includes discovery, design, development, testing and deployment, and marketing. 

  • Mobile directory app templates are affordable—much of the code is already written for you.
  • The templates come with all the features you need to create your own mobile app.
  • The heavy lifting has been done so you can focus on creating the app you want by customizing and adding elements that will make your app unique.
  • The templates come with documentation—all you need to do is follow the instructions.

How to Pick a Mobile Directory iOS Templates?

When you're choosing an app template keep the following factors in mind: 

Ease of use: It has to be so simple that someone with no coding expertise can easily learn and use it. The documentation should be clear. 

Design: Since directories are huge databases, simplicity is key. The design of the directory template should be intuitive, uncluttered, and consistent from screen to screen. 

Responsiveness: So your app will work on all mobile devices.

Cost: Compare the prices of other templates and see what fits your budget.

Customization: The template should be easy to customize, so that the finished app can reflect your unique style and branding. Customization should not take a lot of time. 

Social sharability: Make it easy for users to spread the word about your directory app by sharing it with others through social media.

Monetization: Look for the ability to take payments through different payment gateways, ability to earn through regular and featured listings, advertising, subscriptions and so on. 

Back-end tools—for analytics, generating reports, etc.  

Integration with email marketing platforms like MailChimp.

Location-based searches with integrated maps: any directory that deals with physical locations, stores, or services will need location-based search and maps. 

Ratings and reviews: Tools for customers to rate and review businesses. This is user-generated content that makes it easier for people to find your business online, and lets them know they can trust your product or service. 

Downloads: The number of downloads of a particular app template is proof of its popularity among users. It shows they trust the provider. 

Security and frequent updates: Bugs make your app vulnerable to attacks. Regular updates are an indicator of the trustworthiness of the provider. Your choice of an app template should factor this in. 

Support: Once you buy the app template, you may run into some issues. Make sure that the seller offers support. While reading ratings and reviews, be sure to check what other users say about the quality of support from the provider. 

Another very important thing to keep in mind is that directories generate a lot of activity. High activity has the potential to slow down access to your content. This can turn off your visitors. Your hosting provider should have the capacity to handle it.

Best Mobile Directory App Templates for iOS Available on CodeCanyon

There are a wide variety of premium mobile directory iOS templates you can find in the CodeCanyon marketplace. The app templates I've chosen for this list are among the best and will make it easy to create mobile directory apps.

1. AdForest

AdForest

With AdForest, building and managing your classified ad listings directory has never been easier. Once you install the template and customize it your app is ready to use. You can upload it to the iOS App Store with your own business brand name.

Some of the excellent features of this app include: 

  • multi-currency support for ads 
  • social login and register
  • ad status and ad expiry limits
  • Google map integration
  • location or price based search 
  • user can contact seller or buyer with a messaging system
  • Admob and Google Analytics support

Check out the live preview and give it a test drive. 

User by nagdawi says:

Good code with effective support  

2. Classify: iOS Classifieds App Template

Classify iOS Classifieds App Template

Classify is a complete, easy-to-customize app template you can use to offer mobile classifieds services.  

Features include: 

  • users can post and edit ads from their mobile devices 
  • browse all Classify ads as a visitor—no need to log in 
  • home screen with search fields and category buttons
  • ability to set favorite ads, as well as post and edit your own ads
  • ability to contact seller 
  • Admob interstitial ads 

Checkout live preview and see why user arudkosky says: 

The developer has created an amazing product that is easy to customize and has fast and accurate customer support. 

3. Woopy: iOS Universal Listing and Chat App Template

Woopy iOS Universal Listing and Chat Template

The Woopy app template allows developers to create listing apps that make it easy to buy and sell new or used items. 

Woopy has the following great features:

  • users can browse by keyword or category
  • users can also chat with sellers or potential buyers 
  • users can give feedback on each transaction
  • sellers can add a 10-second video to their listings
  • email verification system, email login and Facebook login
  • ability to report or block inappropriate users or ads 

User photikanet says this about Woopy app: 

A really good app and support from the developer is very fast and effective.

4. iOS Recipe App

iOS Recipe App

With the iOS Recipe App template you can build a recipe app that lists recipes according to category—including a favorites category that users will create themselves. 

In addition to push notifications and social sharing, more features of this beautiful app template include: 

  • screen supports multiple images
  • transition between screens 
  • Google AdMob integration
  • a sliding menu on the left side of the app
  • data is stored in XML and can be easily edited or replaced with data loaded from a server. 

User jsbwong says this about iOS Recipe App

Good and nice support, simple and direct, apps run smoothly. Thanks.

5. Events: iOS Universal Events App

Events iOS Universal Events App

Events is an app template that allows you to create your own event directory mobile iOS app. Users can submit new events and you can approve them by changing the status of the submitted event from Pending to Approved

Here are some features of this fantastic app: 

  • ability to automatically add an event on your native iOS Calendar app
  • ability to open its address in Maps (to get directions) 
  • share events on Facebook, Twitter or other apps installed on your device
  • informs users if events are current or they have passed

User  varukeen says:

Good and modern design, like it! Easy to use...

6. Restaurateur iOS 2.0 

Restaurateur iOS 20 app template

Restaurateur iOS 2.0 allows developers to build restaurant listing apps. This app template comes with an extensive back-end management system. 

Users can set up unlimited shops or restaurants searchable by categories, subcategories, or products. 

Have a look at the live preview and see why user by danixcvnyliu says:

Great template, great design, also great support! 

7. List App: Listing Directory Mobile App for iOS

List App Listing Directory Mobile App for iOS

ListApp is a listing directory mobile template that runs as a native app. It allows you to create directory listing apps. It has many elements and features to help you do so. ListApp is built with the very popular React Native mobile app development platform.

Features of this awesome app template include: 

  • a map to help find listing location
  • easy reservation by tapping on the calendar
  • social login supporting Facebook login
  • monetization and advertising: Admob and Facebook ads 

Have a look at the live preview demo and see if it suits your needs. 

User by bobozd says:

Great app, easy to work with, great support.

8. Business Directory Ionic

Business Directory Ionic 3

The Business Directory template allows developers to create store or business listing apps. This template has very clean code and a clean user interface. It also comes with a powerful back-end that can supply data updates. 

Users can browse through businesses and stores by category, name, or distance. Store and business owners can display and promote their products, services, news, contact information and more.

This template was created with the very popular Ionic cross-platform mobile platform.

Conclusion

These iOS directory app templates stood out for me but there are many more templates you will find on CodeCanyon.

If you’ve enjoyed this article, here are more posts to help you find an app template that suits your needs.

  • iOS
    10 Best iOS App Templates for Business
    Nona Blackman
  • iOS SDK
    Jump-Start Your Mobile App With an iOS App Template
    Lorca Lokassa Sa
  • Ionic
    Ionic Mobile App Templates for eCommerce
    Kyle Sloka-Frey
  • Ionic
    10 Stunning Ionic App Templates
    Esther Vaati
  • Ionic
    10 Best Ionic 3 App Templates
    Nona Blackman
10:30

Creating Tables In Figma

Creating Tables In Figma

Creating Tables In Figma

Sasha Belichenko
2019-09-25T12:30:59+02:002019-10-09T03:06:34+00:00

In this tutorial, we will talk about how tables can be created in Figma by using components and Atomic Design methodology. We will also take a look at the basic elements of the table layout and how components can be included in the component library so that they can become part of the design system you are using.

To make it easy for you, I’ve prepared a mockup example that uses all of the components we need for this tutorial.

To follow along, you will need to have at least some understanding of the basic Figma concepts, its interface, and how to work with Figma components. However, if you’re new to Figma and working with table data, I recommend watching the “Getting Started” video to help you better understand Figma end-to-end, as well as the article “How To Architect A Complex Web Table” that was published not too long ago here on Smashing Magazine.

To simplify the scope of this tutorial, let’s assume that the colors, fonts, and effects already exist as styles in the Figma project you’re about to begin. In terms of Atomic Design, they are atoms. (To learn more, the folks at littleBits wrote a great article on the topic.)

The target audience for this tutorial are designers (UX, UI) who have either already adopted Figma into their workflows or are planning to try Figma in their next design projects but aren’t sure how to get started.

So, without further ado, let’s dig in!

Quick Note: While writing this article, Figma introduced plugins. At the time of publishing, there weren’t any good ones for working with tables, but things might change fast. Who knows, maybe this article will actually help an aspiring Figma plugin developer to create a really neat Figma Tables plugin, or at least, I hope it will. 😉

Introduction

Imagine the table as an organism. The table cell is then a molecule which is comprised of individual atoms. In design terms, they’re cell properties.

So, let’s start with the cell. It has three properties:

  1. Background
  2. Border
  3. Content

Now we’ll take a closer look at each one of them.

Background

The background will be a separate component in Figma. The size doesn’t really matter since we can stretch the component as we need, but let’s begin with setting the size to 100×36 pixels.

In this component, add a rectangle of the same size as the component itself. It will be the only object inside the component. We need to attach the rectangle’s borders to the component’s borders by using constraints (set constraints to “Left & Right” and “Top & Bottom” at the right panel in the Constraints section), so that the rectangle stretches automatically to the size of the component.

If you’d like to see this in action, watch this tutorial on how the constraints work in Figma.

The Background Component The Background Component (the ‘atom’) (Large preview)

The fill color of the rectangle will determine the background color of the cell. Let’s pick the white color for it. I recommend choosing that color from the color styles that are configured at the beginning of the project.

Background colorChanging the background color (Large preview)

Border

This one is a bit trickier than the background. You can’t just create one rectangle with a stroke. We may need different kinds of borders: one for the separate cells (with borders around), one for the whole row of cells with only top and bottom borders, or one for the table header that we might want to separate from the rest with a wider line. There are many options.

Border properties:

  • Border line (left, right, top, bottom, or absence of any of them)
  • Line width
  • Line color
  • Line style

Each line within the cell border might havea different width, color, and style. For example, the left one could be a continuous red line, and the top one a dotted grey line.

Let’s create a component with a size of 100×36 pixels (the same as we did before). Inside the component, we need to add 4 lines for each border. Now pay attention to how we are going to do this.

  1. Add a line for the bottom border with the length of the component width;
  2. Set its position to the bottom border and constraints to stretch horizontally and stick to the bottom border;
  3. For the top border, duplicate the line for the bottom border, rotate it by 180 degrees and stick to the top of the component. (Don’t forget to change its constraints to stick to the top and stretch horizontally.);
  4. Next, for the left border, simply rotate by -90 degrees and set its position and constraints to be at the left side sticking to the left border and stretching vertically;
  5. Last but not least, you can create the right border by rotating it by 90 degrees and setting its position and constraints. Set stroke color and stroke width for each line to gray (select from the color styles) and 1 pixel respectively.

Note: You may be asking yourself why we rotated the line for the bottom border. Well, when you change the stroke width for a line in Figma, it will rise. So we had to set this “rise” direction to the center of the component. Changing the line’s stroke width (in our case it is the border size) won’t expand outside the component (cell).

Now we can hide or customize the styles separately for every border in the cell.

The Border Component A border component with 1px stroke (Large preview)

If your project has several styles for table borders (a few border examples shown below), you should create a separate component for each style. Simply create a new master component as we did before and customize it the way you need.

Border Styles A few extra examples of border styles. Note that the white background is not included in the component. (Large preview)

The separate stroke component will save up lots of your time and add scalability. If you change the stroke color inside the master component, the whole table will adjust. Same as with the background color above, each individual cell can have its own stroke parameters.

Border’s width and colorChanging border’s width and color (Large preview)

Content

This is the most complex component of all.

We need to create all possible variations of the table content in the project: plain text, a text with an icon (left or right, different alignment), checkboxes, switches, and any other content that a cell may possibly contain. To simplify this tutorial, please check the components in the mockup file. How to create and organize components in Figma is a topic for another article.

However, there are a few requirements for content components:

  • Components should stretch easily both vertically and horizontally to fit inside a cell;
  • The minimum size of the component should be less than the default cell size (especially height, keep in mind possible cell paddings);
  • Avoid any margins, so the components can align properly inside a cell;
  • Avoid unnecessary backgrounds because a cell itself has it already.
Content components examples Examples of cell content in components. This is not a complete list; you can use most of the components of your design system inside a table. (Large preview)

Content components can be created gradually: start with the basic ones like text components and add new ones as the project grows in size.

The reason we want the content to be in components is the same as with other elements — it saves uptime. To change the cell’s content, we just need to switch it in the component.

Changing the component inside the cellEditing the table using cells components (Large preview)

Creating A Cell Component

We created all the atoms we need: background, border, content. It’s time to create a cell component, i.e. the molecule made from atoms. Let’s gather all the components in a cell.

The cell component The cell component (the ‘molecule’) (Large preview)

Set the background component as the bottom layer and stretch it to the whole cell size (set constraints to “Left & Right” and “Top & Bottom”).

Add the border component with the same constraints as the background component.

Now to the most complicated part — the content content.

The cell has paddings, so you need to make a frame with the component’s content. That frame should be stretched to the whole cell size except for the paddings. The content component should also be stretched to the whole frame size. The content itself needs to be deprived of any margins, so all paddings will be set by the cell.

At the end of the day, cell paddings are the only property in a component that we will set only once without an opportunity to change it later. In the example above, I made it 4px for all sides.

Note: As a fix, you can create columns with empty cells (with no content and width of 16px for example) left and right to the column where extra margin is needed. Or if your table’s design allows, you can add horizontal paddings inside the cell component. For example, cells in Google Material Design have 16px paddings by default.

Don’t forget to remove the “Clip content” option for the cell and frame (this can be done at the right-hand panel in the Properties section). The cell’s content can go out of its borders; for example, when a dropdown is inside your cell and you want to show its state with a popup.

Note: We’ll be using this cell style as the main one. Don’t worry if your table has additional styles — we’ll cover that in the Table States and Components, Not Overrides sections.

Cell Options For A Standard Table

This step could be optional but if your table needs states then you can’t go without it. And even more so if there is more than one border style in the table.

So let’s create additional cell components from which it’d be easier to build up a table. When working with a table, we will select the appropriate component depending on its position in the table (e.g. depending on the type of borders).

In order to do that, let’s take our cell component and create eight more masters from it. We also need to disable the appropriate layers responsible for borders. The result should look like the image below.

Cell options The cell options we need to build a table. Note that there could be a few extra depending on your table borders styles. (Large preview)

The top row is for the cells on top and in the middle of the table. The bottom row is only for the cells at the bottom. This way we’ll be able to put the cells one after another with no gaps and keep the same stroke width.

A few examples:

The First example If each cell in the table has a border, we’d only need cells 1, 4, 5 and 8. (Large preview) The Second example If there are merged cells or border absence, we must apply the rest 2 and 3 cells as well as 6 and 7 to the bottom row. (Large preview) The Third example If the table design considers the absence of vertical borders, cells 2 and 6 would be enough. (Large preview)

Note: For each border style created above, it’d be good to add master components like the ones described earlier.

So we have excluded the necessity of overriding cell’s instances (disabling the appropriate layers, to be precise). Instead of that, we use various components. Now if, for example, a column uses a different style from the default (the fill color or border), you can choose this column and simply change the relative component. And everything will be alright. On the opposite side, changing a border of each cell manually (disabling the appropriate borders) is a pain you don’t want to bother with.

Now we are ready to create tables (in terms of Atomic Design — organisms) from the various cell components (molecules) we made.

Customizing The Table

Changing the row’s height in the whole table is relatively easy: highlight the table, change the element height (in this case, the cell’s height, H in the right-hand panel in the Properties section), and then change the vertical margin from the element to 0. That’s it: changing the line height took two clicks!

Changing the row heightChanging the row height for the whole table (Large preview)

Changing the column width: highlight the column and change the width size. After moving the rest of the table close up, select the whole table by using the Tide Up option in the Alignment panel as well as the first item in the dropdown list under the rightmost icon.

Changing the column widthChanging the column width. (Large preview)

Note: I wouldn’t recommend grouping rows and columns. If you change the column size extending the elements, you’ll get fractional values for width and height. If you don’t group them and snap to the pixel grid, the cell size will remain an integer number.

The background color, stroke type, and content data can be changed in the appropriate component or in one of the eight cells master components (cells that had different stroke styles). The only parameter that can’t be changed right away is the cell margins, e.g. content paddings. The rest are easily customizable.

Components, Not Overrides

Looking at what we got in the end, it might seem like overkill. And it is if there is only one table in your project. In this case, you can simply create one cell component and leave the background and stroke components off. Simply include them in the cell component, create the table and do the necessary customization for each separate cell.

But if components are included in a library that is used by a number of other files, here comes the most interesting stuff.

Note: *I do not recommend changing the background color and stroke in components’ instances. Change them only in the master. By doing so, those instances with overrides won’t get updated. This means you would have to do that manually and that’s what we’re trying to avoid. So let’s stick to the master components.*

If we need to create an additional type of table cells (e.g. the table header), we add the necessary set of master components for cells with the appropriate styles (just like we did above with the eight cells that had different stroke styles), and use it. Yes, it takes longer than overriding components’ instances but this way you will avoid the case when changing the masters will apply those changes to all layouts.

Table States

Let’s talk about the states of the table’s elements. A cell can have three states: default, hover, and selected. Same for columns and rows.

If your project is relatively small, all states can be set by overrides inside instances of your table components. But if it’s a big one, and you’d want to be able to change the look of the states in the future, you’ll have to create separate components for everything.

You’ll need to add all eight cells with different stroke variants for each of the states (maybe less, depends on the stroke style). And yes, we’ll need separate components for the background color and the stroke for the states as well.

In the end, it’ll look similar to this:

Hover and Selected The cells’ states (hover and selected) (Large preview)

Here’s where a bit of trouble comes in. Unfortunately, if we do everything as described above (when changing the component’s state from one to another), there is a risk of losing the cell’s content. We’ll have to update it apart from the case when the content type is the same as in the master cell. At this point, we can’t do anything about it.

Table with rows’ states Table with various rows’ states. (Large preview)

I added tables in the mockup file that were made in a few different ways:

  • Using this tutorial (separate components for cells’ styles);
  • Using the cell component (components for borders, background, and content);
  • Using the cell component that unites everything (with only content components in addition).

Try to play around and change the cell’s styles.

Changing the stateChanging the state of the row. (Large preview)

Conclusion

If you’re using the same components library in several projects and you’ve got a reasonable number of tables in each of them, you can create a local copy of components (cells components with stroke styles and, if needed, cells components with different states), customize them, and use them in the project. The cell content can be set based on local components.

Also, if you’re using the table for one large project with different kinds of tables, all the above-mentioned components are easily scaled. The table components can be improved to infinity and beyond, like creating the cell states when hovering and other kinds of interactions.

Questions, feedback, thoughts? Leave a comment below, and I’ll do my best to help you!

Figma Table Mockup Download

As promised, I created a complete version of the Figma table mockup that you’re welcome to use for learning purposes or anything else you like. Enjoy!

Tables in Figma mockup design Here’s a Figma table mockup that you can use for learning purposes — let the creativity begin!

Related Reading

Useful Resources

  • Figma YouTube Channel
    The official Figma channel on YouTube — it’s the first thing to watch if you are new to Figma.
  • Google Sheets Sync
    A Figma plugin that helps you get data from Google Sheets into your Figma file. This should work fine with the techniques from this tutoria, but you’ll need to invest some time into renaming all the text layers for this to work properly.
Smashing Editorial(mb, yk, il)

September 24 2019

20:22
15 Textured Grunge Fonts With a Handmade Style
11:00

Designing Complex Responsive Tables In WordPress

Designing Complex Responsive Tables In WordPress

Designing Complex Responsive Tables In WordPress

Suzanne Scacca
2019-09-24T13:00:59+02:002019-10-09T03:06:34+00:00

(This is a sponsored article.) Mobile devices can be problematic for displaying complex tables and charts that would otherwise stretch the entire width of a laptop or desktop screen. This may leave some of you wondering whether it’s even worth showing tables to mobile and tablet visitors of your website.

But that doesn’t make sense. In many cases, a table isn’t some stylistic choice for displaying content on a website. Tables are critical elements for gathering, organizing and sharing large quantities of complex and valuable data. Without them, your mobile visitors’ experience will be compromised.

You can’t afford to leave out the data. So, what do you do about it?

This requires a more strategic solution. This means understanding what purpose the data serves and then designing the complex web table in a way that makes sense for mobile consumption.

A WordPress table plugin called wpDataTables has made light work of designing both desktop and mobile compatible tables, so I’ve included examples of these complex tables throughout this post. Keep reading to explore the possibilities.

The Most Common Use Cases For Tables On The Web

There’s a lot of value in presenting data in a table format on a website.

Your writers could probably find a way to tackle each data point one-by-one or to provide a high-level summary of the data as a whole. However, when data is handled this way, your visitors are left with too much work to do, which will only hinder the decision-making process.

On the other hand, tables are great for organizing large quantities of data while also giving visitors an easier way to sift through the data on their own.

As such, your visitors would greatly benefit from having complex data sets presented as tables — across a wide variety of use cases, too.

Feature Lists

There are a couple of ways to use tables to show off product features.

For e-commerce sites, the product inventory is broken up by its most pertinent features, allowing visitors to filter their results based on what’s most important to them:

e-commerce product tables e-Commerce sites can use product tables to quickly list out all products and their key features. (Image source: wpDataTables) (Large preview)

This would be great for any large vendor that has dozens or hundreds of similar-looking products they want customers to be able to filter and sort through.

You could also use a table to compare your product’s features directly against the competition’s. This would be better for a third-party marketplace where vendors sell their goods.

Amazon includes these kinds of tables:

Side-by-side competitor tables Marketplace sites use side-by-side competitor tables to simplify decision-making. (Image source: Amazon) (Large preview)

By displaying the data in this format, customers can quickly do a side-by-side comparison of similar products to find the one that checks off all their requirements.

Pricing Tables

If you’re designing a website where services or memberships are sold instead of products, you can still use tables to display the information.

You’ll find a good example of this on the BuzzSumo website:

Service-based companies list prices in tables Companies that sell services, like BuzzSumo, use tables to display pricing and features. (Image source: BuzzSumo) (Large preview)

Even though there’s less data to compile, you can see how the structure of the table and the stacking of the services side-by-side really help visitors make a more well-informed and easier buying decision.

Catalogs

A catalog is useful for providing visitors with an alphabetized or numerically ordered list. You might use one to organize a physical or digital inventory as this example demonstrates:

Catalog tables Catalog tables make it easier for users to find what they’re looking for. (Image source: wpDataTables) (Large preview)

This would be good for bookstores, libraries and websites that have their own repository of reference material or content.

You might also use a catalog to help customers improve the accuracy of their orders:

Catalogs for order accuracy Catalog tables can be used to aid shoppers with order accuracy. (Image source: wpDataTables) (Large preview)

This type of table provides customers with key specifications of available products to ensure they’re ordering the right kinds of parts or equipment.

Best Of Lists

There are tons of resources online that provide rundowns of the “Top” winners or “Best Of” lists. Tables are a useful way to summarize the findings of the article or report before readers scroll down to learn more.

This is something that websites like PC Mag (and, really, any tech or product review site) do really well:

Best-of reviews table PC Mag organizes a summary of best-of reviews in a table format. (Image source: PC Mag) (Large preview)

This helps readers get a sense for what’s to come. It also allows those who are short on time to make a faster decision.

Directory Tables

Directory websites have ever-growing and regularly updated lists of data. These are your real estate listing sites, travel sites, professional directories and other sites containing high volumes of complex data that really shouldn’t be consumed without a filterable table.

Case in point: this list of available apartments:

Directory website table Directory websites that change often need tables to keep listings organized. (Image source: wpDataTables) (Large preview)

This makes it much easier for visitors to see all options in a single glance, rather than have to go one-by-one through individual entries that matched a search query.

General Data

There are other data lists that are just too complex to handle as loose text. Sports data, for instance, should always be presented in this format:

Sports statistics table Basic statistics, like for sports teams, should never be presented as loose data. (Image source: wpDataTables) (Large preview)

You can see how this keeps all data in one place and in a searchable list. Whether visitors are looking for their home team’s stats, or want to compare the performance of different teams from their fantasy sports league, it’s all right there.

How To Design Complex Responsive Tables

Regardless of what type of data you’re tasked with presenting on a website, the goal is to do so in a clear fashion so visitors can take quicker action.

Now, it’s time to figure out how to best format this data for mobile visitors.

Delete, Delete, Delete

If your client has pulled their data from an automated report, they may not have taken time to clean up the results. So, before you start any design work on the table, I would suggest reviewing the data they’ve given you.

First, ask yourself: Is there enough data that it warrants a table?

If it’s a simple and small enough list, it might make more sense to ditch the table.

Then, go over each column: Is each of these useful?

You may find that some of the columns included aren’t necessary and can be stripped out altogether.

You may also find that some columns, while an essential part of each item’s individual specifications list, won’t help visitors make a decision within the table. This would be the case if the column contains an identical data point for every item.

Finally, talk to your writer or data manager: Is there any way to shorten the columns?

The table’s labels and data may have been written in full, but your writer may have a way to simplify the responses without compromising on comprehension.

When possible, have them work their magic to shrink up the text so that columns don’t take up as much space and more can be revealed on mobile. Don’t just do this for mobile users either. Even on desktop and tablet screens where more screen real estate is available, the shortening of labels can help conserve space.

It may be as simple as changing the word “Rank” to the number symbol (#) and abbreviating “Points” as “Pts”.

Make data smaller Designers and writers need to work together to create smaller tables. (Image source: wpDataTables) (Large preview)

While it might not seem like one word will make much of a difference, it adds up the more complex and lengthier your tables are.

Start With Two Columns

By default, mobile tables should always start with two columns. It’s about all the screen’s width will allow for without compromising the readability of the data within, so it’s best to start with the basics.

When you contrast a full-screen table on desktop against its counterpart on mobile, you can see how easy it is to identify the two columns to include. For example, a mobile statistics table includes a column for item type and one for the profits earned from each:

Mobile table with two columns It’s a good idea to design responsive tables with two columns to start. (Image source: wpDataTables) (Large preview)

This doesn’t mean that all other data is lost on mobile. You just need to let visitors know how they can expand the table’s view.

In this example, when visitors select the eyeball icon above the table, they have the option to add more columns to the table:

Column view options If visitors want to scroll right, give them column view options. (Image source: wpDataTables) (Large preview)

In allowing for this option on mobile, your visitors can control how they consume data while also selecting only the data points that are most important to them.

The result will then look like this:

Mobile table with more than two columns An example of a mobile table with additional columns. (Image source: wpDataTables) (Large preview)

While users will have to scroll right to see the rest of the table, the control they wield over column views helps keep this a reasonable task. With just one scroll right, they’ll see the rest of the table:

Horizontal scrolling on mobile Even with more columns on mobile, horizontal scrolling is kept to a minimum. (Image source: wpDataTables) (Large preview)

This is a good option to have for lists of products where the side-by-side comparison is useful in expediting the decision-making process.

Use An Accordion For Standalone Entries

There’s another option you can include which will give visitors more control over how they view table content.

For this example, we’ll look at a list of available cryptocurrencies:

Expandable accordions for mobile tables Data lists (as opposed to product comparison) lists can use expandable accordions. (Image source: wpDataTables) (Large preview)

As you can see, the default here is still to only show two columns. In this case, though, a click of the plus-sign (+) will reveal a new way to view the table:

Expanded row on mobile An example of what an expanded row looks like on mobile tables. (Image source: wpDataTables) (Large preview)

When open, all of the data that would otherwise force visitors to scroll right is now visible within a single screenful.

While you can certainly include an expandable accordion in any responsive table you create, it would be best suited to ones where a direct side-by-side comparison between products or services isn’t necessary.

Keep Vertical Scrolling To A Minimum

Just as you want to prevent your visitors from having to scroll past the horizontal boundaries of the mobile website’s pages, you should limit how much vertical scrolling they have to do as well.

Data consumption, in general, isn’t always an easy task, so the more you can minimize the work they have to do to get to it, the better.

One way to limit how much vertical scrolling your visitors do is by breaking a table with dozens or hundreds of rows into pages.

A table of annual temperatures on desktop and mobile An example of how to shrink an extra-large table down to a couple columns and multiple pages. (Image source: wpDataTables) (Large preview)

Just remember to make it easy for visitors to scroll through the pages. A well-designed set of pagination controls either at the top or bottom of the table would be useful:

Responsive table pagination Use pagination at the bottom of tables to decrease vertical scrolling. (Image source: wpDataTables) (Large preview)

This would be especially useful for a handful of pages. Anything more than that and the pagination process may become tedious.

You can also include a table search function directly above it:

Mobile table search function Above-the-table search helps reduce the work of scrolling on mobile. (Image source: wpDataTables) (Large preview)

This allows for a quick shortcut when your users have a good idea of what they’re looking for and want to jump straight to it.

Include Both Filtering And Sorting For Larger Data Sets

So, let’s say that you have a very extensive list of data. You don’t want to force users to scroll through dozens of table pages, but you also can’t afford to remove any of the data sets. It’s all pertinent.

In that case, you’re going to hand some of the control back to your visitors. This way, their choices will determine how much of the table they end up seeing.

Let’s use this list of mutual funds as an example:

Complex table example An example of a complex table on mobile. (Image source: wpDataTables) (Large preview)

The image above is the default view visitors would see if they scrolled immediately to the table. However, they might find it to be intimidating and decide that filtering out bad results will improve the view:

Table filters Filtering allows users to greatly narrow down how many rows are displayed on mobile. (Image source: wpDataTables) (Large preview)

What’s nice about including filters on mobile tables is that they function the same way your mobile contact forms do. So, visitors should have an easy time filling in and moving between fields, which will get them quicker to the results they want to see.

Another way to improve how their results are displayed is by using the sorting feature. When they click on the top label of any column, it will automatically sort the column in descending order. Another click will reverse it.

Table sorting Sorting allows users to see results in descending/ascending order. (Image source: wpDataTables) (Large preview)

These two features are a must-have for any table you build, though they’re especially important for mobile visitors that don’t have as much time or attention to give to your tables.

Wrapping Up

You’re here because you want a better way to present complex tables to your mobile visitors.

The key to doing this right is by first familiarizing yourself with the kinds of tables you can create. Even if mobile devices limit how much can be seen at first glance, that doesn’t make it impossible to share that kind of data with them.

Next, you need to build user control into your tables, so that visitors can decide what they see and how they see it.

And, finally, you’d do well to find a tool built specifically for this complex task. For those of you building websites with WordPress, wpDataTables is a WordPress table plugin that’s able to create responsive tables and charts. It doesn’t matter how large your data set, or what use case it’s for, it will enable you to quickly and effectively organize and display responsive tables on your WordPress website.

Smashing Editorial(ms, yk, il)
02:33

Insert a Calendar Into WordPress With the Pro Event Calendar Plugin

Having a calendar to be displayed on your website is a must for many business owners. Calendars are the best way to share all the upcoming events that your business has with your audience. However, the various calendar plugins available on the market often have too little features, expensive add-ons, or are too complicated to setup. 

The Pro Event Calendar plugin makes adding an affordable, professional, and sleek calendar to your posts and pages easy. In this tutorial, I will go over how to create events, how to create the actual calendar, how to style the calendar, and how to add the calendar to your website so all your visitors can stay up to date with your business.

What We Will Be Building

For this tutorial, we are going to be the owners of a Yoga studio. We would like to let our customers and potential customers know when we run our Monday morning Yoga class called "Monday Mood Lifter," so we are going to build a calendar to display on our webpage. This calendar will be a dark-skinned calendar that all our website viewers can see and interact with. 

The finished event calendar

Creating Events 

Before we can create our calendar, we need to create the specific events for our calendar so we can display these events on the calendar. To add an event, head on over to the Event Calendar in your WordPress dashboard and click All Events. Next to the title, "Pro Event Calendar, click Add New. You will then be taken to the event editor where we are going to title this event Monday Mood Lifter.

Next, we are going to go over to the right-hand side of the editor and adjust the date of the event as well as the start and end time. We want this event to be a weekly event that starts on the first Monday of August and ends at the end of the month. In the date section, enter 2019, 8, and 5. This will set the date to start on the 5th of August. 

Our start time is going to be 10 am and our end time is going to be at 11 am, so we are going to type those in the appropriate fields under the date section. Since we want to have this event occur every Monday, we are going to head over to the select a frequency section and choose weekly from the drop-down menu. Then select the Mon option from the new menu that is displayed below the drop-down menu. To set the end date head over to the End Date section. We are going to type in 2019, 8, 26.

Setting the end date

Finally, we are going to change the color of the event that will appear on the calendar. We are going to do this so our website viewers will easily be able to spot that there is an event on a particular day. 

Scroll down on the event editor page until you come to the Event Data section and find the Color option. To add a color to this particular event, you will first need to create a color for it to be displayed in the drop-down menu. To do this, click the special events link. This will take you to the special dates and event color menu where you will click the button Add New Special / Event Color. Add the text Blue in the Title field and choose the color blue in the Color field. 

Coloring events in the calendar

Click the Submit button and the blue color will now be available. Now head back over to the EvEvent Data section. Click the drop-down menu next to Color and select the blue color that you just created. 

We are done creating our event, so click the Publish button on the right-hand side of the editor. Check out the video below to watch the event creation process in action: 

Creating the Calendar 

Now that we have created the event that we would like displayed on the calendar, it is time to create the calendar itself. On the left-hand side of your WordPress dashboard, click Calendars under the Event Calendar section. This will pull up the calendars list where you will then click the Add New Calendar button. Under General Settings > Title, we are going to type in Yoga Schedule.

Next, we are going to change around a few of the display settingsWe are going to change the skin and show timeIn the drop-down menu next to skin, choose Dark, which will change the interface of the calendar to be a darker color. Next, check the Show Time box which will show the event time on the calendar. At the bottom of the editor, click Save and your calendar will be created and shown in the calendars list. You can view the video below to watch how to create a calendar. 

Adding the Calendar to your Website

The WordPress Pro Event Calendar plugin makes the use of shortcodes to add the calendar to your website. Once you have created your calendar, it will appear in the Calendars List. You will see that there is a Default Shortcode column in the calendar list. 

Next tor your calendar, you will see a custom shortcode. Copy this shortcode to your clipboard. From there you will then create a new page or post. Under the visual editor for the page or post, paste the shortcode. Click the preview button on the right-hand side of the editor and your calendar will now be shown on your page or post. To watch how to add the calendar to your website, watch the video below

Getting the Most Out of Pro Event Calendar

This calendar creation tutorial only scratches the surface of what this plugin can do. This calendar plugin is rich with features that can be added to your calendars to make them more useful to your audience and your business. Here are a few features that this plugin offers that will take your calendar to the next level. 

Bookings

The booking option allows you to have your website viewers book a specific event. This allows you to know who will be attending your events so you can plan accordingly. You can also set the maximum number of people able to book an event, so your specific event does not get overbooked. In the plugin settings in the back-end of your WordPress site, you will be able to see who has booked a specific event and you will be able to export this list to an Excel spreadsheet. 

Subscribe to a Calendar

This is an incredibly useful feature. The subscribe to calendar feature allows your website viewers to subscribe to any calendar that you create. When a user subscribes to a calendar, they will get notified anytime there is a new event. Having this email reminder sent to your audience's mailbox will make sure that they do not forget your event, so make sure you turn on this option in the Edit section of your Calendars.

Google Map Support

If you are running an event that requires people to come to a specific location, then this feature should definitely be enabled. This makes it much more convenient for your customers to plan their trip to your event. They can see the calendar and get directions to your event all in one place instead of having to browse around to find your event's location. 

Conclusion 

The Pro Event Calendar plugin will give you the tools necessary to create a custom calendar for your WordPress website. In this article, I showed you how to create an event, add it to a calendar, and display it on your WordPress website with the Pro Event Calendar plugin

If you are interested in purchasing this calendar plugin, visit CodeCanyon to download it. Also, feel free to search through the various other calendar plugins on CodeCanyon if this one isn't quite right for you.

  • WordPress
    8 Best WordPress Booking and Reservation Plugins
    Lorca Lokassa Sa
  • WordPress
    20 Best WordPress Calendar Plugins and Widgets
    Esther Vaati
  • WordPress
    How to Create a Google Calendar Plugin for WordPress
    Ashraff Hathibelagal
  • WordPress
    Best Free WordPress Calendar Plugins
    Monty Shokeen
  • WordPress Plugins
    20+ Best Popup & Opt-In WordPress Plugins
    Nona Blackman
  • WordPress
    6 Best Weather WordPress Widgets & Plugins
    Kyle Sloka-Frey
02:25

Create an Email Subscription List With Opt-In Panda Plugin For WordPress

To run a successful business or blog on your WordPress website, you will need to have a growing email subscription list. This email list will allow you to market to your target audience and will become a trusted source of revenue and traffic if used correctly. 

But how do we collect emails from our target audience?

Thankfully, there are plenty of WordPress plugins that we can choose from to collect these emails. One of the best plugins to collect emails is the Opt-In Panda plugin. Opt-In Panda collects emails by locking specific content on your pages and posts until a user has signed up. This is a very effective way to collect emails from your target audience that you can market to in your email newsletters. In this article, we’ll go over how you can collect emails on your website with the Opt-In Panda plugin. 

What We Will Be Building 

This tutorial will cover how to build an email locker and place it on a webpage to blur out your webpages text. We are using this email locker to collect email addresses from viewers of our webpage so we can market to them in the future. This email locker will blur out the entire webpage's content and an email sign up popup will be displayed over the blurred out content. This popup will require the user to enter their email address in order to view the content on the webpage. 

We are creating this email locker because it is a very effective way of marketing and building your audience. The people who view your webpage and enter in their email into your email locker are interested in your website's content. From a marketing perspective, this is key. If the webpage's content is aligned with what you are selling, then you will have identified a targeted audience that has already shown interest in what you are selling—this will give you a much higher conversion rate for sales. Below is an image of the email locker that we will be creating. 

The Opt-In Panda email locker in action

Creating a New Locker

To collect emails from your website visitors, Opt-In Panda locks a portion of the content on a webpage and asks the visitor to enter their email. This gives visitors a reason to subscribe right there and get instant access to your websites valuable content. 

To create this locker, we are going to head on over to WP Dashboard > Opt-In Panda > + New Locker. Next, click on + Create Item in the Email Locker section. This will take us to the email locker editor. We are going to first name the locker, "Email Locker," at the top of the editor. 

Now we are going to change the Basic Options of the locker to have the locker function the way we want it to. Under Basic Options, we want to change the default locker header to be more descriptive for the website visitor. We will change it to say This Content Is Only For Email Subscribers.

Next, we are going to change the locker message. We want to make it clear to the website viewer that they need to have a valid email address in order to access the content so we will make a minor change to the text to say, Please subscribe to unlock this content. To subscribe, enter a valid email address below.

Setting up Opt-In Panda

Now we are going to change the theme of the locker. There are three themes to choose from. choose the one that  the theme that fits best with the color scheme and design of your website. In our case, the Dark Theme will fit the best. 

Right below the Theme and Overlap Mode settings, you will be able to see a preview of the actual locker which will help you make your theme choices. Next, we will change the Overlap Mode. The overlap mode is how website visitors will visually see the locked content. 

We want the locked content to be blurred out so website visitors cannot see the actual content on the page, so we will select the Blurring option. You can see the changes reflected in the preview section of the editor. 

The next settings we are going to change are in the Subscription Option part of the editor. To ensure that the user is not putting in a fake email address just to view the content, we are going to choose the Full Double Opt-In setting. Once the user enters in their email address, they will receive a confirmation email. Once they confirm the subscription in the email, the content on the website will be unlocked. If the user puts in a fake email address, they will not be able to confirm the subscription and won't be allowed to see the content. By default, the email confirmation email will be sent through WordPress. We will let WordPress send these emails, but you can have your email service provider send out these emails instead. 

Subscription options for Opt-In Panda Next, we are going to go to the right-hand side of the locker editor and adjust the Terms & Policies settings. We are going to turn the consent checkbox on. In the preview, you will see that a consent checkbox has been added to the bottom of the locker. 

This is a very important feature to turn on. As of 2018, the European Union implemented a new data protection law that covers processing personal data. Turning this feature will ensure that the locker is compatible with GDPR. If your website interacts with EU citizens, you need to have this active. 

That is it! Your locker has now been created and is ready to add to your website. Check out the video below to watch the email locker creation process that we just went over. 

Adding the Locker to Your Website

Like most WordPress plugins, Opt-In Panda makes the use of shortcodes to add the locker to your website. First, we will need to find and copy the shortcode to our computers clipboard. Head up to the top right of the locker editor and locate the Manual Locking section. In this section, you will see a shortcode. Copy this shortcode and then head on over to a page or post that you would like to put your newly created email lock on. 

Once you are on this page, you are going to paste the shortcode right before the page or post content in the WordPress text editor. We are going to cut the second half of the shortcode as this will signal to the plugin to lock the content between the shortcode. The send half of the shortcode starts with [/emaillocker...]. Once you have cut the second part of the shortcode, head on over to the last piece of website content that you want to be locked and paste this shortcode. 

Congratulations! Your content will now be email locked and you are ready to start growing your email list. Watch the video below to see how to add the locker to your website. 

Getting the Most Out of Opt-In Panda

In this article, we covered just one possible use of the email locker. There are many other uses of the email locker then just blurring out the text on your webpages. Here are a few ways that you utilize the Opt-In Panda plugin to help you grow your email list and marketing campaigns. 

Lock Free Download Links

By locking just the download links on your webpage, you give the user a chance to read through the content of the page and then entice them to enter their email address to receive the free download. This works most effectively when you place the download and the email locker at the bottom of the webpage and use the content placed before the download to convince the reader that they must have the free download. 

Lock Images and Videos

Blocking specific images is another useful way to encourage users. In today's video and image-driven world, users would rather look at images and watch videos then do any reading. Putting an email locker on any important videos and images on your website will give your users a good reason to sign up!

Lock Specific Sections of Your Website

The email locker allows you to lock as many webpages as you would like. This is very handy if you have sections of your website that you don't want users to have instant access to. Areas of your website that you could lock that would help you collect a number of emails include free download sections, blogs, galleries, or any area of your site that you don't want to give away for "free."

Conclusion

The Opt-In Panda WordPress plugin gives you the ability to create an email locker that prevents your website viewers from viewing a pages content unless they enter their email address. This locker is incredibly helpful for building your email list for your website. In this tutorial, you learned one way to create this email locker using the plugin. 

To give this plugin a try, head over to CodeCanyon and check out the live preview of the Opt-In Panda plugin. And while you're here, check out some of the other great WordPress plugins available from CodeCanyon.

  • WordPress Plugins
    20+ Best Popup & Opt-In WordPress Plugins
    Nona Blackman
  • WordPress
    How to Make a Newsletter Email Subscription Popup With the ConvertPlus WordPress Plugin
    Esther Vaati
  • WordPress Plugins
    Best WordPress Form Builder Plugins for 2019
    Lorca Lokassa Sa
  • WordPress
    8 Best WordPress Booking and Reservation Plugins
    Lorca Lokassa Sa
  • WordPress
    10 Best WordPress Slider & Carousel Plugins of 2019
    Nona Blackman

September 23 2019

16:01

15 Free Newest Static HTML Website Templates

HTML Website Templates, as the name suggests, are the basic framework of the pre-designed generic webpage that can be tweaked/modified to cater to the user’s specific requirements. The user can be an individual, a company, or an entire organization. Having a pre-designed, almost ready to use templates help ease and speed up the process of bridging the requirements of clients and ready availability of the same by the developers and web designers. It enables non-developers to create their website without having to rely on professionals for help.

Typically, each static template is made to adhere to a particular industry and caters to its requirements. There is a vast pool of options to pick from when designing your website. Some options are paid ones, but there is a good chance you can find something that caters to your exact needs without having to pay for it.

This is a curated list of 15 free static html templates that would work best for their respective industries. Next to each template, we’ve listed the highlights as well as the industries which the templates are designed for to help you understand the parameters while choosing a suitable template for yourself or your client.

 1. FOX:

  Industry: Education

Fox template is a free academic website template that comes with a modern look, with tons of dynamic elements. The website can be used for any educational purpose – schools, universities, online courses or any other educational projects. The most attractive feature of this template is how it places its CTAs (Click-To-Action) on the home webpage itself.

Apart from such a pleasing home page Fox also gives its users a dedicated page for courses, a plugin for Google Maps, and a working contact form. The smooth animations on scrolling add to the overall premium feel of the page, especially with features like Live Count that gives it the edge.

2. Niko:

Industry: Portfolio/Resume

NIKO is a free HTML website template made to market an individual on his/her strengths. It enables the client to build an online persona for themselves, highlighting their strengths and core interests. The template is user-friendly and easy to navigate. The entire webpage is one big page that can be scrolled down. However, there is also ease of segmentation of the entire page into ‘Home’, ‘About’, ‘Skills’ and more to navigate potential visitors directly to the part in which they’re interested. It has a Call to Action button placed optimally to ease employers to get in touch with the user.

With a minimal approach and dynamic features like a neat slider, video support, mouse hovers effects, and easy navigation, NIKO is the perfect starting place to build your online persona.

  3. The  Order:

  Industry: Legal

For law firms, attorneys or any legal businesses, ‘TheOrder’ is the best free HTML template to use. It has a clean, polished and premium design template that reflects the professionalism of the user, to their potential clients. With such a detailed page, law-firms can showcase their current work as a testimony of genuineness and efficiency. The template allows space for in-depth case studies that helps the potential clients gain trust in your firm. With a minimal approach to design, this template focuses on bringing out the most relevant information of the user in the most easily accessible manner to their clients.

With contact details and support for Google Maps, it makes reaching out much more accessible.

4. Louie:

  Industry: Photography

Louie is the best free HTML template available for photographers out there. It has an immaculate, modern photography template that catches the website visitors’ attention quickly. The home page has a big banner of few selected photographs the user can put up, which keep changing automatically, providing a carrousel of their best clicks as well as an option to manually switch between them which capture the immediate attention of the visitors.

A brief introduction about the photographer and social buttons to their social media is a handy feature that would increase their reach — also, the dedicated Instagram banner, which can be essential and helpful for the photographers. The template has neat little dynamic features spread across web pages like ‘Collection’, ‘About Me’, ‘Contact’ which makes the page reasonably easy to navigate also pleasing to the eye.

5. Listing Pro:

  Industry: Directory

ListingPro has a fascinating and creative appeal to their potential client. This template includes a picture collage of different services that one can expect to find answers for upon landing their page. This use of picture collage for their hero image grabs immediate attention of the visitors and provides an immediate search bar for answering their queries. The CTAs are nicely placed throughout the website. There is a good use of nifty small animations while browsing the breadcrumbs, or clicking on images.
The template is well laid out with great use of typography and effective CTA placements. The quick search bar can give it an edge over other directory websites as it’s to the point and ensures clients get what they want as soon as they visit the website.

6. The Plaza:

Industry: Fashion Store

The Plaza is a very aesthetically designed template. It has an eye for using punchy colours to hold the visitor’s attention. There is a good use of typography that compliments the background with a cleverly placed CTA to Shop Now. The prices are also displayed openly on the banner images, which may save the visitor time of clicking and going back, which can get irritating. Also, the availability of wallpaper carrousel for the hero image helps the client put forth different products they want to drive traffic to through cleverly placed CTAs.

The scrolling animation when you click on different products makes the entire user experience smooth and seamless. There’s also an additional feature which gives it an edge over most other templates. Proper use of mouseover animation on images of the product lets the visitor have a ‘quick look’ of the product in case they’re just skimming through the site. This is an important feature that visitors would appreciate.

7. Medical:

Industry: Medical

This template is ideal for doctors or clinics that want to drive more traffic to their office through the aid of online presence. The text on the hero image is relevant and establishes trust with the visitor. Below which, the CTA is also well put, which says ‘Get started’. The detail to the wording helps the visitor feel at ease, as medical queries can be frightening. The presences of subtle yet essential CTAs on the left side of the header of the webpage like call and mail address is appreciable. This feature caters to an immediate emergency as well.

Well laid out website with a form to book an appointment present over many web pages, and a dedicated contact us page with Google map plugin makes this website a sensible choice to consider if you want to design a medical website.

8. Fitzone:

  Industry: Fitness/Gym

This template is ideal for designing a fitness/gym website. It has a strong visual with aesethic color scheme and a message that makes the visitor feel at ease. The template doesn’t waste time and gets straight to business by putting a ‘Become A Member’ CTA at the centre of the homepage itself. There are snippets of different forms of exercise services they offer at the bottom of the homepage, which have relevant text and images to go with. Upon using mouse over the image you get a CTA to view more details which ensures smooth navigation around the website without clustering too much information.

9. Carrent:

Industry: Rent a Car Service

This template as the name suggests is for Car Renting services. The template works best for this service because it’s pleasing to look at with the use of beautiful wallpaper for the background and a quick form with all necessary information that the visitor can fill and get quick price estimation at the same time and decide to rent now without exploring other parts of the website as well. This shows that the template is customer-centric and puts their priority first. They have a sliding banner of different offers the company can provide on the bottom side of the homepage as well. Use of illustration to highlight the process of booking a car at the bottom of every page makes it easier for the visitor to understand the process.

10. Ignite:

  Industry: Web-Hosting

It is an excellent template for web hosting services. It has a minimalistic yet visually attractive appeal to itself. The use of overlay over an image helps maintain the brand aesthetic. The website heavily focuses on using two colours only, which creates a visual identity for the page. The contrast between blue and green looks attractive. They introduce themselves in the home page, address the risk of not using their services and place a CTA right below it as a solution. This smart idea of creating a sense of urgency could lead to more conversions. Upon scrolling down the homepage, you’ll find their clientele which can help visitors gain trust in the company. There are nifty animations on stats and data that looks appealing and proper use of illustrations throughout the template.

11. Platforma:

 

Industry: Conferences/Events Page

Platforma is a highly adaptive template that acts as a one-stop solution for all-conference, events, forums and other types of gatherings. It has all the tools necessary to highlight any upcoming event nearby. The visual design of the template is clean and formal. It has a live countdown timer for the event the visitor clicks, which are both a helpful and attractive feature to have. A client can register directly upon opening the website through the registration form. There are smooth animations on scrolling the home page and testimonials at the bottom of the page that helps build trust and credibility.  It has a dedicated webpage to introduce all speakers and also access to a newsletter subscription box that could be helpful to collect essential data of the visitors.

12. MyHome:

  Industry: Property- Home

 myHome is an excellent template for making a website about listing properties for people who are looking for a new place. Such websites are generally too informative with no space for design; myHome, however, is an exception to this. The overall design is consistent and pleasing to the eye. It highlights different properties in a banner that is the first thing visitors see on the site. This banner also has a slideshow image carousel so you can highlight multiple properties. The best part of this template is how they’ve integrated Google maps for better convenience. There is a query list of popular areas right next to the map plugin. You can click on the area you want to discover and have relevant properties pop up on the map as you do. All necessary contact information is listed in the header as well as in a dedicated contact page.

13. Job Listing:

  Industry: Job Portal

The job listing is a free job board website which has a neat and simple design. It has a minimalistic approach which makes the user experience easy and smooth. There is an efficient query form above the fold which helps visitors browse their queries easily without wasting any time. Many small widgets add on to the productivity and ease of surfing the website. The use of job exclusive icons for different industries looks appealing as well as makes demarcating them easier.

14. Interior:

Industry: Interior

 This template can be used by architecture agencies as well as interior designers. While interiors can be a complicated process, it is ideal for keeping the website as simple as possible. Interior achieves exactly that. The clean and minimal interface highlights the specific projects to make them stand out. There is space for client testimonials as well, which help build trust and transparency with your clients. The integrated social media ribbons can be helpful as design firms generally have an Instagram account to showcase their work which they can link their website.

15. World:

  Industry: News

This template has the potential for fitting much content, be it regarding news, entertainment, blogs and much more. It helps individuals to write their ideas and share it with the world with the most aesthetic representation possible. It has a universal approach and doesn’t cater to a specific topic to write. The hero image captures immediate attention, and there are pleasant looking infographics present at the bottom, which links the reader to different blogs.

With this, we are at the end of our list of 15 Free latest Static Html Websites Templates to quickly build your websites. It is essential to understand your product/service and what are the essential design elements and features to keep in mind while selecting a template and build upon it accordingly.

The post 15 Free Newest Static HTML Website Templates appeared first on Line25.

11:30

Is There Such A Thing As Too Much Social Proof?

Is There Such A Thing As Too Much Social Proof?

Is There Such A Thing As Too Much Social Proof?

Suzanne Scacca
2019-09-23T13:30:59+02:002019-10-09T03:06:34+00:00

It’s very easy to start a business these days. But succeeding in that business is another story. There are just too many people who want to escape the 9-to-5, do something with their big idea and make a better life for themselves in the process. I totally applaud that.

However, it’s not practical to think that the idea will sell itself. Consumers need to be given some reason to trust that their money (or time) will be well spent. And when a business or product is new, the best way to gain this trust is by getting clients, customers and others to vouch for you.

That said, is it possible to go overboard with testimonials, reviews, case studies, client logos and other forms of social proof? And is there a wrong way to build social proof into a mobile website or PWA?

Yes and yes!

When Too Much Social Proof Is A Bad Thing

I was working on the copy for a new website earlier this year. My client told me that the design team had prepared a wireframe for the home page and wanted me to use that as a framework for the copy. Normally, I would be stoked. When I work as a writer, I want to stay in writer mode and not have to worry about layout and design suggestions.

The only problem was that the home page they wanted was littered with social proof and trust marks. It would’ve looked like this (note: the purple boxes contain social proof):

Sample wireframe with social proof A sample wireframe of a home page with too much social proof. (Source: Canva) (Large preview)

In reviewing the wireframe, I had a number of gripes. For starters, it was way too long, especially for mobile visitors.

There was no way people were going to scroll seven times to find the section that finally invites them to take action.

Secondly, there was too much social proof. I know that seems counterintuitive. After all, isn’t it better to have more customer validation? I think in some cases that’s correct. Like with product reviews.

In BrightLocal’s 2018 Local Consumer Review Survey, respondents said they want to see at least 40 product reviews, on average, before believing a star rating.

BrightLocal number of reviews to believe start rating BrightLocal’s consumer review survey says that consumers want to see 40 review before believing a business’s start rating. (Source: BrightLocal) (Large preview)

Even then, consumers aren’t looking for a perfect score. As you can see here, only 9% of respondents need a business to have a perfect rating or review in order to buy something from them:

BrightLocal star rating preference BrightLocal survey respondents prefer to see a minimum of 3- or 4-star ratings instead of 5. (Source: BrightLocal) (Large preview)

And I can tell you why that’s the case.

I used to write product reviews. One of the things I’d do when assessing the quality of a product (before making my own judgments) was to look at what online reviewers — professional reviewers and customers — had to say about it. And let me tell you… there are tons of fake reviews out there.

They’re not always easy to spot on their own. However, if you look at enough reviews at once, you’ll start to notice that they all use the same verbiage. That usually means the company paid them to leave the review or gave family, friends and employees pre-written reviews to drop.

I’m not the only one who’s noticed this trend either. BrightLocal’s respondents have as well:

BrightLocal fake reviews 33% of BrightLocal respondents have seen lots of fake reviews while 42% have seen at least one. (Source: BrightLocal) (Large preview)

Only 26% of respondents said they hadn’t come across a fake review while 42% had seen at least one in the last year and 33% had seen a lot.

When it comes to things like testimonials and case studies, I think consumers are growing just as weary about the truthfulness of the praise.

TrustRadius surveyed B2B buyers on the subject of online reviews vs. case studies. This is what it found:

TrustRadius customer reviews vs. case studies TrustRadius asked respondents to assess their feelings on customer reviews vs. case studies (Source: TrustRadius) (Large preview)

It makes sense why consumers don’t feel as though case studies are all that authentic, trustworthy or balanced. Case studies are written by the companies themselves, so of course they’re only going to share a flattering portrait of the business or product.

Having worked in the digital marketing space for a number of years, I can tell you that many customer testimonials aren’t always genuine either. That's why businesses need need to stop worrying about how much social proof they have and start paying more attention to the truthfulness and quality of what they're sharing with visitors.

The point I’m trying to make isn’t that we should ditch social proof. It’s an important part of the decision-making process for consumers. But just because it can affect their decision, it doesn’t mean that repeatedly bashing them over the head with it will work either. If your website and its messaging can’t seal the deal, a bunch of logos and quotes meant to convince them to buy won’t either.

What you need to focus on when building social proof into a mobile site or PWA is quality over quantity. Sure, you might want to highlight the sheer quantity of reviews that have been gathered on a product, but in terms of space on your website? With social proof, less is more.

Tips For Building Social Proof Into A Mobile Website Or PWA

You don’t have a lot of room to spare on mobile and you don’t want to make your visitors dig and dig to find the important details. So, while you do need social proof to help sell the business and its product, you need to do so wisely.

That means giving your content room to shine and strategically enhancing it with social proof when it makes the most sense to do so.

Consolidate Social Proof on the Home Page

I know how hard it can be to convince people to work with you or buy from you when your business is new. That’s especially the case when you’re entering a field that’s already dominated by well-known and well-reviewed companies.

However, rather than make your home page longer than it needs to be — for desktop or mobile visitors — why not consolidate the strongest social proof you have and put it in one section?

What’s neat about this option is that you can get creative with how you mix and match your social proof.

Customer Reviews + Trust Seals

Two Men and a Truck is the kind of company that needs customer testimonials. It’s the only way they’re going to effectively convince new customers to trust them to enter their home and carefully transport their belongings from one location to another.

Two Men and a Truck social proof Local movers Two Men and a Truck stack a testimonial on top of trust seals on the home page. (Source: Two Men and a Truck) (Large preview)

Rather than bog down their home page with testimonials, Two Men and a Truck use one especially positive review and a number of professional trust seals to close the deal in one fell swoop.

Google Reviews + Facebook Reviews

Another way to consolidate social proof on the home page is by aggregating reviews from other platforms as the website of Drs. Rubinstein and Ducoff does:

Drs. Rubinstein and Ducoff home page with Google and Facebook reviews The home page of Drs. Rubinstein and Ducoff shows off the latest reviews from Google and Facebook along with an average star rating across all platforms. (Source: Drs. Rubinstein and Ducoff) (Large preview)

This is a tiny section — it doesn’t even fill the entire screen — and yet it packs a lot of punch.

First, you have the total number of reviews and average star rating shown at the top. Remember that survey from BrightLocal? This is the kind of thing that would go a long way in convincing new patients to sign up. There’s a good amount of reviews to go on and the average rating seems realistic.

Also, because these reviews come from Google and Facebook, they’re connected to real people’s profiles. Plus, the date is included in the Google review.

Unlike testimonials which are just a quote and a person’s name (if we’re lucky), this is a quote, a star rating and the date it was published. This way, prospective patients don’t have to wonder how long ago it was that Drs. Rubinstein and Ducoff received these reviews.

Twitter + App Store Reviews + Awards

You’ll find another creative example of consolidated social proof on the Pocket website.

Pocket aggregates social proof from a number of sources Pocket uses Twitter, the Google App Store, the Google Play Store Webby Awards as trust marks. (Source: Pocket) (Large preview)

Even though Pocket is free to use, that’s not necessarily enough to convince someone to try a new piece of software — especially if you want them to download it as a mobile app.

Rather than rely on faceless testimonials, though, Pocket has chosen to show off some convincing and verifiable social proof:

  • A quote from a Twitter user with a healthy follower base,
  • The actual rating of its app on both apps stores,
  • The number of times it’s won a Webby award.

It’s a unique patchwork of social proof which is sure to stand out from the traditional quote block many websites use to promote their products.

Make It Sticky

One of the great things about making the move to a PWA is you can use app-like elements like a sticky bar to show off important information to visitors. If it makes sense to do so, you could even put some social proof there.

Google Reviews Widget

There’s been a big surge in independent mattress companies in recent years. Tuft & Needle. Loom & Leaf. Saatva. They all seem to promise the same thing — a better quality memory foam mattress at a steal of a price — so it’s got to be hard for consumers to choose between them.

One way to make this differentiation is with Google Reviews.

On the desktop website for Lull, the home page reviews callout is tucked into the bottom-left corner.

Lull Google customer reviews on desktop Lull shares Google customer reviews in a widget on its desktop website. (Source: Lull) (Large preview)

It’s almost too small to notice the reviews with so much more to take in on the home page. That’s a good thing though. The social proof is always present without being overwhelming.

What’s interesting to note, though, is that the mobile counterpart doesn’t show any Google reviews on the home page. It’s not until someone gets to the Mattress page where they’re able to see what other customers have said.

Lull Google customer reviews on mobile Lull shares Google customer reviews in a sticky bar on its PWA. (Source: Lull) (Large preview)

In this particular screenshot, you can see that the Mattress page on the PWA has a section promoting the product’s reviews. However, even when visitors scroll past that section, the sticky bar continues to remind them about the quantity and quality of reviews the mattress has received on Google.

CTA Banner

Another type of website this sticky social proof would be useful for would be one in hospitality. For example, this website for the Hyatt Regency San Antonio:

Hyatt Regency San Antonio Suites page An example of one of the Suites pages on the Hyatt Regency San Antonio website. (Source: Hyatt Regency San Antonio) (Large preview)

Just like the Lull example above, the Hyatt Regency tucks its social proof into a sticky bar on its internal sales pages.

Hyatt Regency sticky bar with social proof The Hyatt Regency places TripAdvisor reviews next to its conversion elements in a sticky bar. (Source: Hyatt Regency San Antonio) (Large preview)

Visitors see the number of TripAdvisor reviews and star ratings when they first enter the Suites page. When they scroll downwards, the sticky bar stays in place just long enough (about one full scroll) for visitors to realize, “Cool. It’ll be there if or when I’m ready to do more research.”

What’s nice about how this particular sticky bar is designed is that the reviews are part of the conversion bar. It’s kind of like saying, “Want to book your trip, but feeling nervous about it? Here’s one last thing to look at before you make up your mind!”

Create a Dedicated Page for Social Proof

If you’re not building a PWA or you have too much social proof to show off in a small space, create a dedicated page for it. This is a great option, too, if you plan to share something other than just testimonials or reviews.

Testimonials/Reviews

Winkworth is an estate agency in the UK. Testimonials are a useful way to convince other sellers and lessors to work with the agency. Yet, the home page doesn’t have any. Instead, the company has chosen to place them on a Testimonials page.

Winkworth testimonials page The Winkworth estate agency keeps its home page free of testimonials and instead places them on a dedicated page. (Source: Winkworth) (Large preview)

It’s not as though this page is just a throwaway of every positive thing people have said. The testimonials look like they’ve been hand-picked by Winkworth, especially the longer ones that contain more details about the experience and the people they worked with.

Winkworth testimonials An example of some of the hand-picked testimonials Winkworth has gathered for its Testimonials page. (Source: Winkworth) (Large preview)

Each testimonial includes the person’s name as well as which Winkworth location they’re referring to. This way, visitors can learn more about the experience at specific locations instead of just hearing how great Winkworth is as a whole.

Case Studies

It’s not just testimonials that could use their own page. Case studies shouldn’t clutter up the home page either.

While Bang Marketing promotes its case studies with a promotional banner on the home page, that’s all you hear of it there. They save their customers’ stories for individual pages like this one:

Bang Marketing case studies Bang Marketing includes a video testimonial with every case study. (Source: Bang Marketing) (Large preview)

Each case study page is minimally designed, but captures all of the information needed to tell the story.

First, there’s a video from the client explaining what Bang Marketing was able to do for them. Then, there’s a brief description of what the team worked on. Finally, high-quality images provide visitors with a look at the resulting product.

This is a much more effective way to share case studies than placing a barrage of portfolio images all over the home page.

Press

There are two ways to handle the Press section of a website. The company could publish its own press releases or it can share information about where it’s been featured in the press.

While the former is useful for sharing company news and wins with visitors, it’s just too self-promotional and won’t help much with conversion. The latter option could really make a big impact though.

This, for instance, is what visitors will find on the About & Press page for The Dean Hotel:

The Dean Hotel Boston magazine cover The Dean Hotel includes magazine covers and article screenshots as social proof on its website. (Source: The Dean Hotel) (Large preview)

After a short intro of the hotel, the rest of the page is covered in magazine covers and article screenshots that go back as far as 2013. Visitors can click through to read each of the articles, too.

Dean Hotel social proof The Dean Hotel uses articles as social proof on its website. (Source: The Dean Hotel) (Large preview)

This is a unique way for a website of any type to share social proof with visitors.

If your client happens to have a bunch of positive press and never-ending hype surrounding its brand, try to leverage that on the site. Plus, by including screenshots from the articles themselves, you get another opportunity to show off the product (or, in this case, the hotel and its rooms).

Wrapping Up

Consumers have become very savvy when it comes to marketing and sales online. That’s not to say that they don’t fall for it — usually, when it’s done genuinely and with transparency. However, we’re at a point where a brand saying, “We’re the best! Trust us! Buy from us!”, doesn’t usually cut it. They need more validation than that.

At the end of the day, your mobile website or PWA needs social proof to convince visitors to convert.

That said, be careful with how you build social proof into the site, especially on the home page. You don’t have time or space to waste, so don’t create something unnecessarily bulky just so you can show off how many testimonials, reviews, case studies, client logos high-profile partnerships you have. This is about quality over quantity, so make it count.

Smashing Editorial(ra, yk, il)
06:44
What Most People Don’t Tell You About Designing Your Own Logo

September 21 2019

20:45

Jumpstart Your Android App UI With a Material Design Template

Google's Material Design is one of the few design languages that have managed to stand the test of time. It's been around for over five years now, and still continues to enjoy widespread popularity among Android users. The Android platform's SystemUI adheres to the guidelines of this design language, as do most popular apps available on Google Play today.


  • App Templates
    20 Best Android App Templates of 2019
    Nona Blackman
  • Mobile Development
    10 Best Multi-Purpose Android App Templates
    Nona Blackman
  • App Templates
    15 Best eCommerce Android App Templates
    Nona Blackman
  • Android
    9 Android Templates to Inspire Your Next Project
    Lorca Lokassa Sa

Although Material Design's guidelines are well-documented and easy to understand, implementing them correctly using the Android SDK and AndroidX requires lots of careful coding and testing, primarily because you need to support multiple pixel densities, screen sizes, device orientations, and Android versions. By using MaterialX, however, you can save all that time and effort.

Developed by Envato Elite author Dream Space, MaterialX is a premium Material Design UI components library available on CodeCanyon. In addition to basic UI components such as buttons, cards, and sliders, it offers hundreds of unique, hand-crafted Material Design layouts you can directly start using in your apps. As such, while working with these layouts, you won't have to worry about tasks such as positioning UI components, adjusting their margins and paddings, or even animating them.

Let us now take a closer look at what MaterialX has to offer.

1. Navigation Components

It is very important that you have an attractive interface that allows users to move from one screen of your app to another. Material Design lists several components you can use to build such an interface, and MaterialX has implementations for all of them.

The most popular of such components these days is the bottom navigation bar. MaterialX currently offers eight beautiful bottom navigation bars for you to choose from. Here are two such bars:

Sample bottom navigation bars

If you prefer using sliding drawers instead, this template gives you several options, all of which are geared towards different types of apps. For instance, if you're building a news app, you can use the Drawer News component. Similarly, if you're creating a mail-related app, you can use the Drawer Mail component.

Sample drawer components

Tabs, which usually complement top app bars, are also widely used in Android apps. MaterialX has a variety of tab views, which look good in both light and dark themes. As you might expect, all of them support the horizontal swipe gesture.

Sample tab components

2. Lists and Grids

Lists are an integral part of Android apps, and a well-designed list can dramatically improve your app's user experience. MaterialX offers nearly a dozen different types of lists, including sectioned, animated, and multi-select lists. It also offers a few app-specific lists, such as lists for news apps.

Sample list views

If you need to show more than one item in a row though, you'll have to use one of the six different grids this template has. In addition to the commonly-used basic and sectioned grids, MaterialX has grids for gallery apps and caller apps.

Sample grids

Cards are often used with both lists and grids. Because MaterialX has card templates for handling most use cases, you can now avoid creating your own cards from scratch. Some of the card templates can be used to create introductory or tutorial screens too.

Sample card view

It's worth noting that MaterialX has separate components to display smaller lists, such as lists of tags and preferences lists.

3. Forms

Creating forms is hard. Convincing users to fill and submit forms is harder still. Fortunately, MaterialX comes with a large number of beautiful templates for forms, which your users are going to enjoy filling in.

While creating forms, you are free to choose from either the generic form templates, such as those for sign in and sign up forms, or from the domain-specific templates, such as those for eCommerce.

Sample forms

To make your life easier, MaterialX also has entire layouts dedicated to specific types of forms. Because these attractive layouts serve as full-fledged containers for the forms, while using them, you won't have to add any other UI components to your layout. Currently, there are layouts for login forms, phone number verification forms, and payment forms.

Dedicated form layouts

Note that many of the form templates have dark-themed alternatives too.

4. Form Elements

If you're interested in creating forms yourself, instead of directly using Android's default form elements, you could try using the elements available in MaterialX. They are usually better-looking and provide a more interesting user experience.

The template has a variety of buttons, pickers, and sliders, as you can see in the screenshots below:

Form elements offered by MaterialX

To facilitate displaying form-related messages, the template has several custom implementations for toasts, alert dialogs, and snackbars too.

5. Dashboards

An intuitive dashboard displaying lots of timely and context-sensitive data can be the ideal home screen for many kinds of apps, such as fitness apps, travel apps, and apps related to cryptocurrencies. MaterialX currently has eleven dashboards, each targeting a different domain. For example, here are two dashboard layouts, one for eCommerce apps, and one for travel apps: 

Sample dashboards

All the available dashboards are comprehensive, well thought out, and visually pleasing. Therefore, you can usually start using them without having to make any customizations.

6. Social Screens

Adding simple social features to your app is a great way to improve user retention. Typically, all you need to do is allow your users to create profiles for themselves and share content with friends or followers. MaterialX has dozens of components that can help you save time while implementing both these features.

This template has nearly two dozen layouts for profile pages, each with a unique look and feel. While some are generic, most are designed to target certain user groups, such as photographers, freelancers, and job seekers.

Sample profile page layouts

Additionally, MaterialX has layouts for displaying user feeds and timelines. If you're trying to implement Twitter-like functionality in your app, you're going to find these layouts extremely helpful.

Layouts for user timelines

Lastly, if you want to allow your users to communicate among themselves or with your your team in realtime, MaterialX offers layouts that are very similar to those you see in apps like WhatsApp and Telegram.

7. Screens for Blogs

Do you have a WordPress blog already? With MaterialX, you can create an Android app for it effortlessly.

The template has a large variety of layouts you can use for displaying your posts. These pleasant layouts can smoothly render both text and images.

Sample blog layout

Additionally, there are many layouts for "about us" pages, which you can use to talk about yourself or your company, and "search" pages, which you can use while adding search functionality to your app.

Search page and about us page samples

Because blogs these days aren't limited to just text and images, MaterialX has layouts for handling audio and video content too. The template has two layouts for video players and several for audio players, which support both independent sound files and playlists.

Conclusion

MaterialX is one of the most comprehensive Android app templates available on CodeCanyon. With over 2250 sales and mostly five-star reviews, it's also one of the most popular templates there. In my opinion, it's a must-have for Android developers who want to dramatically improve the looks of their apps.

When you purchase a license for MaterialX, in addition to its source code, you'll get access to all its documentation. You can refer to it to learn more about the template.

If you found this article useful, do take a look at the following articles too:

  • React Native
    Beautiful Material Design Apps With the Antiqueruby React Native Components
    Ashraff Hathibelagal
  • Material Design
    Best Material Design Android App Templates
    Nona Blackman
  • App Templates
    20 Best Android App Templates of 2019
    Nona Blackman
  • Mobile Development
    17 Ways to Make Your Mobile App Beautiful With Envato Elements
    Nona Blackman
  • Android
    9 Android Templates to Inspire Your Next Project
    Lorca Lokassa Sa
  • Android SDK
    10 Best Android Game Templates
    Ashraff Hathibelagal

20:23

Guide to WordPress Event Calendar and Booking Plugins

WordPress calendar plugins let users make bookings, schedule events, pay for appointments and more. 

Calendars help organize and keep track of things so they don’t get out of hand. For example, they help us plan and schedule seminars, webinars, workshops, events, appointments, automatic payments, follow up on leads, check availability, remind us of important meetings and so on. 

If you’re a blogger or content manager, calendars help you schedule assignments, plan how to release and publishing content and so on. 

If your website does any of these things, you need a calendar plugin to help you create calendars that visitors to your website can interact with.  

In this article we’ll look at calendar plugins available on CodeCanyon. 

  • WordPress Plugins
    Choose the Best WordPress Event Calendar Plugins
    Nona Blackman
  • WordPress
    Definitive Guide to Installing a Free or Premium WordPress Plugin
    Rachel McCollin
  • WordPress
    20 Best WordPress Calendar Plugins and Widgets
    Esther Vaati
  • WordPress
    8 Best WordPress Booking and Reservation Plugins
    Lorca Lokassa Sa
  • WordPress
    How to Add a Calendar to Your WordPress Site With the Events Schedule Plugin
    Jessica Thornsby

Introduction

The sheers quantity of things one needs to juggle when running a business is overwhelming. Without a calendar your business can fall into disarray. And that quickly translates into unsatisfactory user experiences. This means significant losses not only in income but also customers and potential customers. 

This is why you need a calendar plugin for your website. 

What is a Calendar Plugin?

A calendar plugin is a piece of code that helps you incorporate a calendar tool into your WordPress website so you can display dates, events, schedules and so on neatly in one place on your website. 

Calendars are added to the front-end of your website. Simple calendars allow you to display things like dates and availability. Advanced calendar plugins come with comprehensive solutions for booking and scheduling, including features like purchase and payment integration.

Why Do You Need a Calendar Plugin? 

Calendars help us organize and keep track of things so they don’t get out of hand. 

Calendar plugins can be used in the following ways: 

  • To help with planning, organizing, and publicizing. 
  • Showing the time, date, and locations of events. 
  • Creating, managing and showing events on your website.
  • Scheduling appointments online or taking bookings online.

In practical everyday use, calendars can help you plan and schedule seminars, webinars, workshops, events, or appointments. They can also make automatic payments, follow up on leads, check availability, remind us of important meetings and so on. 

Not only that, but if you're a bloger of content manager, a calendar plugin helps you manage your editorial calendar. It also allows you to schedule posts through different channels, be it website, blog, or social media. 

Some Features You Will Find in Calendar Plugins

A great calendar plugin will provide the following: 

  • templates you can customize to reflect your style. 
  • drag-and-drop builder so you can create your calendar easily. 
  • recurring events to automate events that occur regularly
  • ability to import and export data for back up and recovery. 

Things to Consider When Choosing an Calendar Plugin 

Ease of Use: Using a calendar plugin should be straight-forward. Expect little or no learning curves for the best plugins. 

Responsiveness and Mobile Readiness: This is a no-brainer because over 70% of anything that happens online is through a mobile mobile device. 

Cross-Browser Compatibility: Not everyone uses Firefox or Safari. 

Social Sharing: Users should be able to share your calendar with other users on social media. 

Rating and Reviews: Check what others say about the calendar plugin you are considering. 

Integration: Seamless integration with popular calendars like Google Calendar or iCal is a feature to look for, and so is integration with popular payment and marketing gateways.

WordPress Calendar Plugins on CodeCanyon

On CodeCanyon you will find the best premium calendar plugins that will help you offer a satisfying user experience to your website visitors. These plugins offer a wide range of solutions from very simple to advanced. 

All-Purpose Calendars

If you need lots of flexibility and a variety of functions, the following calendar plugins are your best choice. 

Calendars for Events 

These calendar plugins are best for event scheduling. For example seminars and workshops. 

Responsive Calendars  

Calendars for Bookings

Adding any of the following calendars plugins to your website will enable visitors to your website make bookings for events you create. 

Business Calendars

These calendars cater to very specific niches. However, in that niche they offer comprehensive solutions that cater to specific businesses. 

Booking and Reservation Plugins 

Finally, it is important to note that while a calendar by itself allows you to do some things, not incorporating it with other extensions limits what you can do online and what you can earn. Booking and Reservation Plugins are built around calendars. They offer the most extensive and advanced calendar solutions that combine calendars with the ability to make reservations and pay for booking and appointments. 

Bonus

I couldn't think of a category for these items, but they were too good to pass up!

  • EventOn Slider Addon—for a beautiful way to present your events in slider format. However, it requires EventOn plugin. 
  • gAppointments—If you already have Gravity form you can use the gAppointments add-on for an appointment calendar. 

Conclusion

I hope these calendar plugins for WordPress help you with keep track of things and also a great user experience for visitors to your website. 

The following articles will add to your knowledge of calendar plugins: 

  • WordPress Plugins
    Choose the Best WordPress Event Calendar Plugins
    Nona Blackman
  • WordPress Plugins
    How to Use the WordPress Event Calendar Plugin
    Daniel Strongin
  • WordPress
    How to Create a Google Calendar Plugin for WordPress
    Ashraff Hathibelagal
  • WordPress
    20 Best WordPress Calendar Plugins and Widgets
    Esther Vaati
  • WordPress
    How to Add a Calendar to Your WordPress Site With the Events Schedule Plugin
    Jessica Thornsby
  • WordPress
    Definitive Guide to Installing a Free or Premium WordPress Plugin
    Rachel McCollin
  • Push Notifications
    How to Use WordPress Push Notifications and the Smart Notification Plugin
    Esther Vaati
  • WordPress
    8 Best WordPress Booking and Reservation Plugins
    Lorca Lokassa Sa
  • WordPress
    Create a Booking System With a WordPress Booking Plugin
    Rachel McCollin
  • WordPress
    Best Free WordPress Calendar Plugins
    Monty Shokeen

September 20 2019

20:59

How to Add the Sticky HTML5 WordPress Music Player to Your Site

There are a lot of reasons why you might want to add a music or audio player to your WordPress website. You can use it to allow users to play the audio version of the article they are reading or you can use it to simply add some nice background music to the website. If you are running a small news website, another useful way of using an audio player to improve user experience would be to provide audio version of all news headlines with a brief summary.

  • WordPress
    15 Best WordPress Audio Player and Video Player Plugins
    Jane Baker
  • WordPress
    Adding a Music Player to Your WordPress Site
    Kyle Sloka-Frey
  • WordPress
    How to Add a Free WordPress Music Player to Your Site
    Monty Shokeen
  • WordPress
    How to Add an Audio Player to Your WordPress Site With a Free Plugin
    Sajal Soni
  • WordPress
    Best Free WordPress Audio Player Plugins
    Monty Shokeen

There are a lot of free and paid plugins available to add an audio player to your WordPress website. We have already created a tutorial which discusses how to add a free music layer to your WordPress website. In this tutorial, we will move our focus to the sticky HTML5 music player WordPress plugin available on CodeCanyon. As you will see, the paid plugin offers a lot of important and useful functions missing in the free plugin. You also get free support for six months and free updates for lifetime.

Why Use the Sticky HTML5 Music Player WordPress Plugin?

The plugin that you choose to use on your website will depend on your own requirements. In case of the Sticky HTML5 Music Player WordPress plugin, some of the features can significantly improve user experience.

It gives you the ability to control all the basic settings like autoplay, volume, looping, or shuffling the music. You can also change the color of different UI elements like the previous, pause, shuffle and next buttons. You can also hide these buttons if they are not needed.

One very useful feature of the plugin is continuous playback. This means that whenever you navigate to a new page, the plugin will continue playing the audio from previous minute. The audio level and everything else also remains the same.

Another useful feature of the plugin is its ability to read contents from a folder of MP3 files in order to automatically generate the playlist. This way you don't have to manually add each audio file to the playlist.

The plugin creates a sticky player—that means it sticks to the bottom of the screen and does not interfere with all other content on the website. It also allows you to set a bunch of options to load the player in minimized or maximized state.

In this tutorial, we will use all these features of the plugin in order to create a music player that sticks to the bottom left corner of the screen. It will also automatically generate a playlist based on audio files located in a certain folder.

Creating Your Music Player

Once you have purchased and installed the plugin, it is very easy to add a music player to your website.

You just have to choose the Add New option from WordPress dashboard under LBG AUDIO3 HTML5.

Add a new music player

On the next screen, you can give your player any appropriate name. This name is only used to help you identify the player so you can change it later.

Give your player a name for easy reference

You can now change the appearance of the player and many other options by going to Manage Players and then clicking on Player Settings.

Select the player to change its settings

On the next page, you will see a lot of settings which can be changed individually for each audio player that you create with this plugin. There are two skins available for all the controls in the audio player: blackControllers and whiteControllers. They will determine the color of different buttons like previous, next, play, pause, and shuffle.

The color of other UI elements like the volume control or the buffer indicators can be set using a color picker. You can change the colors to any value you want in order to match them to the over all theme of the website.

Customizing the player UI

There are many other settings at the bottom of the same page. They allow you to show or hide different playback buttons. You can also control the spacing between the player and the playlist by tweaking the value of player margin.

If you want your users to enjoy continuous playback when they are visiting different pages on your website, you should consider setting an appropriate value for the Cookie Expiration Time setting. It is set to 1 by default. This means that any user who visits the website multiple times within a single day will be able to continue the audio playback from same position at which they left.

Adding Songs to Playlist

There are two ways to specify the path of audio files in your music player and add them to its playlist.

The first method requires you to click on the Playlist button of corresponding music player on the Manage Players screen. On the next page, you will see all the existing audio files already added to the current playlist. You can drag them around to change the order in which they are played.

Editing a playlist

Click on the Add new button to add an audio file to the playlist. Now, you just have to specify the path to an MP3 file and set a title for it. Everything else is optional. The title of the file is what will appear in the playlist. Click the Add Record button and the changes will be reflected immediately in the music player UI.

This process can be very tedious if you want to add 20 or 30 audio files to a single playlist. Luckily, the Sticky HTML5 Music Player will generate a playlist for you if you simply specify the path to the folder where all your files are located.

To do this, you have to select Generate Playlist From Folder under LBG AUDIO3 HTML5 in WordPress dashboard. Now specify the path to the folder where all the audio files are located. Remember that this path is relative to the WordPress installation directory, so you don't need to add any leading or trailing slashes. For example, if the audio files are located in a folder called favorite_music in the root directory, simply specify the path as favorite_music instead of favorite_music/ or /favorite_music/.

Specify a folder for automatic playlist creation

Once you click on Generate Playlist, the plugin will automatically fill in the title and other information for each audio file based on its metadata. You will still be able to manually change the title or author name later if you want.

An automatically generated playlist

Customizing the Playlist Appearance

You can also change the spacing and color of the playlist that appears below the music player. The settings for that are available below General Settings on same page.

Customizing the playlist appearance

The setting titled Number of Items Per Screen will determine how many songs in the playlist are listed at once under the player. The player starts showing a scrollbar at the right side of the playlist if there are additional songs that could not be displayed on single screen. This is very helpful if the playlist has a lot of songs or audio files and you don't want the player to take up a lot of area on the screen when maximized.

Once you have changed all the values to suit your own project needs, you can click on the Preview Player button at the top to see how the music player finally looks.

Preview the completed player

Once you are fully satisfied with the UI and other aspects of the music player, you can add it to any webpage you want using shortcodes.

Adding the Music Player to Your Website

This is the last step of the tutorial. You can add the Sticky HTML5 Music Player WordPress plugin to any post or page you like by copying the shortcode shown on the Manage Players page in the plugin's Dashboard menu. In our case, the shortcode is [lbg_audio3_html5 settings_id='4'].

The completed player on a WordPress site

If you want to show the shortcode on each webpage of you website, a better option to add it would be to simply set the Activate For Footer option to true under Player Settings. This will add the music player to the footer of every webpage on your website without the use of any shortcode.

One more thing that you should remember is that the the code for the music player is added at the location where you paste the shortcode. However, visually the player will always stick to a fixed position on the webpage—the bottom left corner in our case.

Final Thoughts

In this tutorial, we learned how to add a music player to any WordPress website using the Sticky HTML5 Music Player WordPress plugin from Codecanyon. The plugin offers some nice features like auto generation of playlists from the contents of a folder and the continuous playback when users load different webpages. It is also very easy to change the UI of different music players so that they blend in perfectly with the rest of the website.

There are a couple of situations where using the continuous playback feature could be useful like playing all the important news headlines of the day or narrating an event or a story. Similarly, you could also use the playlist auto generation feature to quickly create different playlists for different users and occasions. How do you plan on using this music player on your website? Let us know in the comments.

  • WordPress
    15 Best WordPress Audio Player and Video Player Plugins
    Jane Baker
  • WordPress
    Adding a Music Player to Your WordPress Site
    Kyle Sloka-Frey
  • WordPress
    How to Add a Free WordPress Music Player to Your Site
    Monty Shokeen
  • WordPress
    How to Add an Audio Player to Your WordPress Site With a Free Plugin
    Sajal Soni
  • WordPress
    Best Free WordPress Audio Player Plugins
    Monty Shokeen
10:30

15 Questions To Ask Your Next Potential Employer

15 Questions To Ask Your Next Potential Employer

15 Questions To Ask Your Next Potential Employer

Robert Hoekman Jr
2019-09-20T12:30:59+02:002019-10-09T03:06:34+00:00

In my book “Experience Required”, I encourage in-house UX professionals to leave companies who refuse to advance their UX intelligence and capability. There are far too many companies these days who understand the value of UX to waste your time being a martyr for one who will only frustrate you. Your best chance of doing a good job is to avoid a bad position.

Smartly, during a recent Q&A about the book, an audience member asked how we can avoid taking these jobs in the first place. What kinds of questions, he wondered, can you ask during an interview to spot red flags before the company stabs the whole flagpole into your sacred UX heart?

Know What You Want To Know

There’s the usual stuff, sure, such as asking why the position you’re applying for is currently open. What the company’s turnover rate is like. Why that turnover rate is so low or high. A little Googling will easily enough net you a decent list of broad questions you can ask any employer.

But what you really want is to get UX-specific. You want to hone in on precisely what your life might be like should you take the position.

Your best chance of doing a good job is to avoid a bad position.

Sadly, I lacked a great answer at the time to the question about interview questions, so I let it eat at me until I woke up at three a.m two days later and started writing notes. That morning, I emailed my reply to the moderator.

Ask A Great Question, Then Shut Up

To devise the list below, I considered what kinds of things I’d wish a company knew and understood about UX prior to working with them. I can operate in all kinds of situations—as a UX and process innovation consultant, this has been my job, and pleasure, for nearly 13 years now—but I want to know from the start, every time, that the effort will be set up for success. These questions aim to uncover the dirty details that will tell me what I’m walking into.

Much like a good validation session or user interview, these questions are open-ended and designed to draw out thoughtful, long-winded responses. (One-word answers are useless.) I strongly recommend that when and if you ask them, you follow each question with a long, stealthy vow of silence. People will tell you all about who they are if you just shut up long enough to hear them do it. Stay quiet for at least ten seconds longer than you think is reasonable and you’ll get the world.

People will tell you all about who they are if you just shut up long enough to hear them do it.

I’d ask these questions of as many individuals as possible. Given that tech interviews are often hours-long and involve many interviewers, you should be able to grab yourself a wealth of good answers before you head out the door to process and sleep.

If, on the contrary, you are given too little time to ask all these questions, prioritize the ones you’re personally most concerned about, and then consider that insufficient interview time might be a red flag.

Important: The key to the answers you receive is to read between the lines. Listen to what is said, note what is not said, and decide how to interpret the answers you get. I’ve included some red flags to watch out for along with each question below.

Let’s get right to it.

1. How does this company define UX? As in, what do you believe is the purpose, scope, and result of good UX work?
Intent

Literally every person on Earth who is asked this question will give a slightly, or wildly, different answer than you expect or hope for. At the very least, the person interviewing you should have an opinion. They should have a sense of how the company views UX, what the various UX roles have to offer, and what effect they should have.

Red Flag(s)

The UX team has a very limited role, has no real influence, and the team, for the most part, is stretched so thin you could put them on a cracker.

2. How do the non-UX people on your product team currently participate in UX decisions?

Follow-ups: Describe a recent example of this kind of participation. What was the UX objective? How was that objective vetted as a real need? What did you do to achieve the objective, step-by-step? How did it turn out? What did you learn?
Intent

Find out how the entire product team approaches UX and how collaborative and supportive they might be in acquiring and acting on good research insights.

Red Flag(s)

They don’t participate in UX decisions.

3. What UX roles exist in the organization, and what do they do?
Intent

Determine where you’ll fit in, and how difficult it might be for you to gain influence, experience, or mentorship (depending on what you’re after). Also, build on the previous question about who does what and how.

Red Flag(s)

UX people at the company are heavily skilled in graphic design, and not so skilled in strategy. The current team members have limited influence. Your role will be similar. Strategy is handled by someone else, and it trickles down to the UX team for execution.

4. Who is your most experienced UX person and in what ways does that experience separate them from others?
Intent

Determine the range of UX intelligence on the team from highest to lowest. Is the person at the top whip-smart and a fantastic leader? Does that person mentor the others and make them better?

Red Flag(s)

The interviewer cannot articulate what makes that person better or more compelling than others. If they can’t answer this question, you’re speaking to someone who has no business making a UX hiring decision. Ask to speak to someone with more inside knowledge.

Noteworthy, but not necessarily a red flag: If you learn that the most experienced person on the team is actually someone with a very sleight skill set, this can mean either there’s room for you to become an influencer, or the company puts so little value on UX that they’ve selected only employees with a small view of UX. The latter could mean you’ll spend all your time trying to prove the value of bigger UX involvement and more strategic work. You may like that sort of thing. I do. This would not be a red flag for me. It might be for you.

5. What are the company’s plans for UX long-term? (Expand it? Reduce it? How so, and why? Is there a budget for its expansion? Who controls it and how is it determined?)
Intent

Map out your road for the next couple of years. Can you rise into the role you want? Or will you be stuck in a cul-de-sac with zero chance of professional growth?

Red Flag(s)

We plan to keep doing exactly what we do now, and what we do now is pretty boring or weak. Also, we have no budget—like, ever—so if you want to bring in a consultant, attend a seminar, hire another person, or run a comprehensive usability study with outside customers, well, good luck with that.

6. How do UX professionals here communicate their recommendations?

Follow-up: How could they improve?
Intent

Learn how they do it now, and more importantly, whether or not it works.

Red Flag(s)

The interviewer has no answer, or—far worse—has an anti-answer that involves lots of arm-waving and ideas falling on deaf ears. The former can, again, mean the interviewer has no business interviewing a UX candidate. The latter can mean the UX team is terrible at communicating and selling its ideas. While this can be overcome with your much better communication skills, it will almost certainly mean the company has some baggage to wade through. Poor experiences in the past will put other product team members on defense. You’ll have to play some politics and work extra heard on building rapport to get anywhere.

7. Who tends to offer the most resistance to UX recommendations and methods and why?

Follow-up: And how much power does that person have?
Intent

This person will either give you the most grief or will give you the great opportunity to improve your communication skills (remember: design is communication!). Knowing who it is up front and how that person operates can tell you what the experience will be like.

Red Flag(s)

Executives, because they distrust UX. If you lack support at the top, it will be a daily struggle to achieve anything substantive.

8. What do UX practitioners here do to advance their values and methods beyond project work? Please be specific.
Intent

See how motivated the UX team is to perpetuate UX values to the rest of the company and improve how the team works.

Red Flag(s)

They don’t.

9. What do you think they should do differently? Why?
Intent

Discover how your interviewer feels about UX. This is, after all, a person who has a say in hiring you. Presumably, this person will be a big factor in your success.

Red Flag(s)

Keep their noses out of product development, stop telling the engineers what to do (speaks to perception of pushy UX people).

10. Describe a typical project process. (How does it start? What happens first? Next? And then?)
Intent

Find out if there is a process, what it looks like, and how well it aligns with your beliefs as a UX professional.

Red Flag(s)

You’ll be assigned projects from the top. You’ll research them, design a bunch of stuff in a vacuum with no way to validate and without any iteration method, and then you’ll hand all your work to the Engineering team, who will then have a thousand questions because you never spoke to each other until just now.

Bonus Question

How and when does the team try to improve on its process? (If it doesn’t, let’s call that a potential red flag as well.)

11. How has your company learned from its past decisions, and what have you done with those learnings?
Intent

UX is an everlasting experiment. Find out if this company understands it’s supposed to learn from the work and become smarter as a result.

Red Flag(s)

No examples, no thoughts.

12. If this is an agency who produces work for clients: What kind of support or backup does this agency provide for its UX recommendations, and how much power does the UX group have to push back against wrongheaded client ideas?

Follow-ups: How does the team go about challenging those ideas? Provide a recent example.
Intent

Find out how often you’ll be thrown under the proverbial bus when a client pushes back against what you know to be the right approach to a given problem. Your job will be to make intelligence-based recommendations; don’t torture yourself by working with people who refuse to hear them.

Red Flag(s)

The interviewer says the agency does whatever the clients demand. You will be a glorified wireframe monkey with no real power to change the world for the better.

13. How does the company support the UX group’s work and methods?
Intent

Determine how the company as a whole thinks about UX, both as a team and a practice. Is UX the strange alien in the corner of the room, or is it embraced and participated in by every product team member?

Red Flag(s)

UX is a strange alien. Good luck getting anyone to listen to you.

14. What design tools (software) does your team use and why?

Follow-ups: How receptive are people to trying new tools? How does evolution happen?
Intent

Know what software you should be familiar with, why the team uses it, and how you might go about introducing new tools that could be better in some situations.

Red Flag(s)

Gain insight into how the team thinks about the UI portion of the design process. Does it start with loose ideas drawn on napkins and gradually move toward higher-quality? Or does it attempt to start with perfection and end up throwing out a lot of work? (See the next question for more on this.)

15. Does a digital design start low-fi or high-fi, and what is the thinking behind this approach?

Follow-up: If you start lo-if, how does a design progress?
Intent

You can waste a lot of hours on pixel-perfect work you end up throwing out. A company who burns through money like that is also going to be the first one to cut staff when things get tight. No idea should be carried through to its pixel-perfect end until it’s been collaborated on and vetted somehow, so you want to know that the company is smart enough to start lo-fidelity and move gradually to hi-fidelity. Hi-fi work should be the result of validation and iteration, not the start of it. A lo-fi > hi-fi process mitigates risk.

Red Flag(s)

All design work starts and ends in Photoshop or Sketch, and is expected to be 100% flawless and final before anyone sees what you’ve produced.

Running The Interview

In an unrelated Q&A years ago, a hiring manager asked how to spot a good UX professional during an interview. I answered that he should look for the person asking all the questions. I repeated this advice in Experience Required.

Now you can be the one asking all the questions.

And in doing so, not only will you increase your odds of being offered the gig, you’ll know long before the offer shows up whether to accept it.

If you, dear reader, have more ideas on how to scavenger-hunt a company’s red flags, we’re all ears. Tell us about it in the comments below.

Smashing Editorial(cc, il)
08:36
7 Techniques to Nail your Email Personalization

September 19 2019

15:45
Trippy CSS Distortion Effects
15:26

14 Hero Image Design Best Practices for Highest Conversions

A hero image is the main banner which is placed on a web page prominently, generally in the front and center. A banner image is always larger than other images present on the web page, and is generally above the fold, at the center of the page. Majority of the space is taken up by the Hero Image.

The hero image can be an individual image (banner) or a carousel of images. Further, it can be either static or dynamic as well. You can have videos, illustrations or any design element that makes up the canvas in the most appealing manner possible.

What is the need for Hero Images?

Appealing web design is a pre-requisite in today’s competitive world. There is a 50 milliseconds window in which the visitors decide if they want to stay or leave your website.

Capturing the visitor’s attention in such a short span requires a pleasing, relevant and aesthetic visual.  Good Hero Images have that visual appeal that makes visitors decide to stay. This increases the engagement on the website. Once you have arrested their attention, you can further exploit the attention span by cleverly placing your CTAs and mentioning your USPs here to reinforce your importance in their mind.

Now that the relevance of Hero Images is understood, we should talk about essential considerations to keep in mind for Hero Image Website Design Best Practices for Highest Conversions.

Using Optimized High-Resolution Images:

The hero image is as the name suggests the hero of your webpage. It is going to create the first impression of your website in your visitor’s mind. Quality of the image has to be of proper resolution to ensure the image doesn’t pixelate or feels weary. While this stands true, using a large file image for your website can have its drawbacks. The website can take longer to load, which could irritate the visitors and make them leave. Hence it is essential to properly optimize your image for your webpage to ensure quality and efficient experience for the visitor.

Show Value to the Visitor:

You may have a striking image of a beautiful sunset, but will it help visitors engage with your site? If you run a travel page, it definitely would. However if you are into selling pens, it won’t. Your hero image has to be true by the product/service you provide. The relevance is crucial as it gives the visitor value and a sense of direction to understand your niche better. Use your hero image as a trailer to what is in store for visitors to hold their interest.

Highlight your USPs:

If your website is related to an industry where creativity is appreciated, don’t shy away from showing your USPs on your hero image. Even for highly monotonous sectors, you could break from the code and try adding a hero image in the most innovative yet subtle way possible. A minimal line that encompasses your website’s message can go long ways to leave a lasting impact on your visitors. It allows the visitor to create a better understanding of your services in a shorter time. It also shows confidence you have on service/product if you provide some stats. A creative or important USP if displayed with the right design elements, can set you apart from your competitors.

Have Multiple Choices

You might have a mental visual of an image you think would go great as your hero image and as per your web design. While that is a good thing to have, it’s advisable to come up with a few alternatives. This would allow for room for options and assessment to see what looks best.

Furthermore having more than one relevant hero image also allows you to either use it as an image carousel or plan different looks over the period. Never be in haste to select and get done with the hero image, as it plays a vital role in dictating your website aesthetic and appeal.

Allow Interaction

While creating your hero image, keep in mind what is the delivery of your hero image. The visitor must take away what you meant them to from the hero picture for effective communication. There is a great way to ensure the same, through dynamic hero images/illustrations; you could see how the visitors are responding to your hero image.  This also makes the visitor feel more connected as their actions cause the reactions on the web page. This increases engagement. You can do this by using essential design elements like parallax scrolling, image slider and mouseover effects.

Don’t Use Stock Images

While a high-resolution hero image can be attractive and drive more engagement, using stock images to do the same can have a reverse effect on the traffic on your website. While there is no prohibition on using stock images, they wouldn’t be as specific and relevant to your website as an original image/illustration would be. Many times overuse of stock images doesn’t only not increase engagement, and it can also reduce engagement if poorly chosen.  The personal touch is essential for your visitors to identify you as a brand before identifying you as a service offering an alternative because there are good chances the stock image you end up using, someone else might too.

Evoke Emotions:

There is always a better chance of efficient conversion if you can connect to the visitor on an emotional level. Your hero image should be such that it should appeal to the emotion you want to evoke in your visitor’s heart. For instance, if you run an NGO for homeless children, your hero image can be powerful imagery or illustration of a small child in distress with authoritative text to evoke their emotion of guilt. Alternatively, another approach could be showing a happy child to showcase hope and positivity. Many times using extreme emotions can act repulsive, which is why you should be careful as to what emotion you’re catering to when creating your hero image.

Align with content:

It is important to align your hero image with the content of your webpage. The experience has to be seamless, and it should follow the same hierarchy in terms of design language and relevance. If your hero image is designed in a way where it has a lot of white space and minimal approach, but your other webpages or content pockets are clustered and filled with animations, the design language becomes confusing and abrupt for the visitor. It is crucial to create an overall feel of your website and to make sure the hero image compliments it and enhances it. Otherwise, it would have the opposite effect and not increase the conversions.

Make your Service/Product the Hero:

This is another crucial point to understand that often is forsaken. When you use an image for your hero image, the composition matters a lot. You may have multiple subjects in the hero image, along with the main focus subject. All other elements of that image must be acting as guiding lines or leading to the main subject in focus. Otherwise, visitors may miss the actual message or purpose behind the hero image. Same goes for illustrations or any other element you use for your hero image, as there needs to be clarity of what the main subject is, and what is not. Either way, you should only include additional elements if they serve a purpose somehow. Having anything that doesn’t serve a purpose creates noise without adding any value.

Make Sure Your Images Fit All Screens:

The hero image needs to be such that it is displayed as intended on any screen of any device. Proper optimization of these images may require resizing or changing a small image with a larger one or vice versa, but the extra effort would ensure your visitors have access to your webpage through multiple devices. Good user experience across all devices shows commitment to details and seriousness on behalf of the company towards their website. This can help reach a wider audience and also increase engagement.  It is ideal to try keeping the format of text to image if you’re using that design, uniform across all platforms. However, if doing so is making the hero image or the text ambiguous or confusing, consider changing accordingly but still maintaining similarity.

Choose Wisely

The format you decide for your hero image should depend on the purpose you want it to solve. If you’re an artist who’s creating their professional website, adding your sketches or illustrations would add a personal touch to your website as well as showcase your best work in the first 50 milliseconds to your visitors. This would work better than using an image for your case as it’s more relevant to your profession. Similarly, images could be helpful for a photographer trying to create his website. These are extreme examples to demarcate the difference. However, you could use any form of content for your hero image as long as it remains relevant to your niche and business. 

Highlight the CTAs:

CTAs are essential guiding points to ensure conversion on any website. Smart placement of CTAs ensures visitors interaction which leads to a substantial conversion. Thereby, placing CTAs on the hero image ensures maximum exposure and highest chance of visitors interacting with it. However, the CTAs shouldn’t steal the limelight from the hero image. Don’t make it unnecessarily or disproportionally big or bold to impose it on the visitors as that would repulse them and annoy them. It is essential to still guide visitor’s attention to them, for which you should place it strategically. Making the CTAs brighter than usual and using contrast is an excellent way to highlight it without disturbing the visual appeal of the hero image.

Reinforce Brand Aesthetic:

If your website has a layout that uses the colour schematic of your logo, and it’s pleasing to the eyes, incorporate that in the visual language of your hero image as well. This reinforces the brand aesthetic and also creates a visual story for the visitors to connect.  Most of the times, the colour palette of the image itself doesn’t match the brands colour palate, which is all right. Instead of imposing or over-editing the image to fit your brands, colour aesthetics ‘overlay’ is a technique where you could add a colour block that is closer to your brand. Adding a gradient would also add depth to the overall image. This way, the image doesn’t look imposed, and the brand aesthetic also gets incorporated, which creates a strong visual memory for the visitors.

Play with Fonts:

Experiment with different fonts when you’re selecting one for the hero image. You can use a font that compliments the style and feel of the hero image or change it entirely to create a contrast between the hero image and the text which could also add depth in the overall image. Try different fonts until you find your perfect match, but also keep in mind that the font should be readable. Don’t let the process of getting creative make you select fonts that require efforts to read/understand. Your message remains as effective as it is simple and easy it is to read.

It is advisable to invest substantial time when working on the hero image as it is the focal point for your visitors even if for a short moment. This forms their initial impression about your page and thereby it is crucial to get the details right down to perfection.

The post 14 Hero Image Design Best Practices for Highest Conversions appeared first on Line25.

September 17 2019

17:24
Four Common Font Types and When to Use Them
08:00

Learn to Code WordPress Plugins With These 3 Practical Projects

If you want to get started coding your own plugins for WordPress, try our newly updated course, 3 Practical Projects to Learn to Code WordPress Plugins.

3 Practical Projects to Learn to Code WordPress Plugins

In this course, Rachel McCollin will guide you through creating a series of practical call-to-action WordPress plugins. You'll create:

  • a call-to-action plugin that can be activated with a hook from within a theme
  • a plugin to output a call to action from a shortcode that users can embed in their content
  • a call-to-action widget that users can edit and add to their sites with the WordPress Customizer or Widget admin screen

You can take this course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,250 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you can download unlimited items from the huge Envato Elements library of more than 1.3 million creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

 

07:27
5 Design Hacks Guaranteed to Put Your Conversions on Fire
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl