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

September 20 2019


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

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?

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?

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?

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?

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?)

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?

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?

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.

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?

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?)

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?

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.

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?

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?

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?

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)
7 Techniques to Nail your Email Personalization
Sponsored post

September 19 2019

Trippy CSS Distortion Effects

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

Four Common Font Types and When to Use Them

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.


5 Design Hacks Guaranteed to Put Your Conversions on Fire

Best WordPress Calendar Plugins of 2019

WordPress calendar plugins come in many styles and have features to suit an equally wide variety of needs. Some calendars offer complex booking or scheduling features, while others are simple event management calendars. 

Whatever your need, if you're looking for a premium calendar plugin, this list of the ten best WordPress calendar plugins for 2019 will help you decide which one is right for you. 

1. EventOn


EventOn is one of the best-selling WordPress calendar plugins at CodeCanyon and it's no wonder. The calendar’s default setting shows a small photo thumbnail with event name, date, time and location. When a viewer clicks on that info in the calendar, it opens up to display more details including an embedded Google map, social media share buttons, and buttons that allow you to add the event to Google calendar or your own calendar. Users can also add future events when they’re part of a series or recurring events, like for events that occur weekly or monthly. 

If you need even more customisation, there are a number of add-ons available that will allow users to add functions like events with a countdown timer, seating selections, and ability to review the event. There’s also a FullCal add-on that adds a clean, grid-based design to the calendar to display events in a traditional calendar format, and the appearance editor allows you to customise the look of the calendar to match your website style.

User alexsieff says:

"Very good program. I love the flexibility. You can buy the basic module, which works well, and gradually according to your needs, add add-ons. Good assistance."

2. Bookly PRO

Bookly PRO

Bookly PRO offers users an automated online booking and scheduling calendar for WordPress. This fully-customisable booking form is responsive so that it can be used seamlessly on any device. It offers online payments, notifications, and syncs with Google Calendar. Booking lists can be searched, filtered, sorted and printed or exported to CSV.

Another great feature is the two-way synchronisation between Bookly Calendar and Google Calendar which automatically reflects all updates you make in either calendar.  

You can add more advanced functions to your default configuration with a wide selection of Bookly add-ons available with your purchase.

User Mabeny says:

"Great Plugin with several features and add-ons, really easy to customize and very quick, helpful and friendly support."

3. Calendarize it! for WordPress

Calendarize it for WordPress

Whether you need a lightweight events calendar or one with more options and features, Calendarize it! is an excellent choice. That's because, though it offers a traditional monthly events calendar as its default option, you can expand the functions of the calendar with the wide range of free and paid add-ons on offer.  

Some examples of great free add-ons available are the Social Share Panel, Member Profile, Ratings and Reviews, and the Visual CSS Editor add-ons. Other add-ons allow users to add a number of different calendar viewing options like an Event List View, Map View and Grid View.


"Brilliant Calendar plugin. They really bent over backwards to resolve an issue we were having. Top notch support, highly recommend to anyone looking for a calendar on their WordPress site"

4. Booked—Appointment Booking for WordPress

BookedAppointment Booking for WordPress

Booked—Appointment Booking for WordPress is a simple appointment booking calendar that allows you to create a number of calendars, each with their own time slots and custom feeds and then to assign each calendar to a specific user to manage. 

Some of the plugin's outstanding features are guest booking which allows guest to book appointments without the need to register, custom time slots, custom appointment fields, customer ability to add events to their Google calendar, and colour customisation options.

User isntritchie says:

"Simple to use, yet complex to suit any need. A perfect combination. Support is fantastic and I cannot recommend this product high enough. I am a developer myself and everything from the interface to the performance is top tier!"

5. Timetable Responsive Schedule For WordPress

Timetable Responsive Schedule For WordPress

Timetable Responsive Schedule For WordPress is a powerful and easy-to-use WordPress event calendar plugin for users who want to create a timetable view of events in minutes and for users who want to take online reservations for an event within available free slots. These features make it an ideal plugin for solopreneurs like coaches and various kinds of teachers and tutors.

The plugin, which is also compatible with WPBakery Page Builder, comes with an integrated widget to display upcoming events in the form of a scrollable list. It is highly customisable and responsive and you can easily generate a PDF from your the timetable view if needed.

User zefstudio says:

"Great plugin! Easy to use! Modern design!"

6. Wordpress Pro Event Calendar

Wordpress Pro Event Calendar

Wordpress Pro Event Calendar offers an elegant and modern design, with responsive layout and easy to manage events. Some of its standout features are the ability to import events from ICS feeds and Facebook and to accept events submitted by front-end users, making it easy for users to add events. Other noteworthy features are Google Maps integration, custom fields and date range support, WPML support, ability to subscribe to a calendar, and much more. 

User datapress says:

"Great plugin and excellent support."

7. Events Calendar Registration and Tickets

Events Calendar Registration and Tickets

Events Calendar Registration and Tickets is a great choice if you regularly run seminars, events, classes, workshops, conferences, concerts, etc. from your WordPress site and need to provide participants with a means to register or purchase tickets. 

The plugin allows you to not only manage your events, but also keep track of attendees, and sell tickets all from the admin section of your website. What's more, the admin interface is easy to use and extensive documentation is provided to help you set up your events in no time. 

The all-in-one WordPress calendar plugin provides all the addons and features you need in an events calendar as part of the initial price, and you can rest assured that the software will be regularly updated to keep up with technological advances. 

User Han_Fei says:

"Great support, great plugin, really nice stuff... good job!"

8. Event Booking Pro

Event Booking Pro

If you're looking for an event booking system, you need to check out Event Booking Pro. The responsive WordPress calendar plugin is loaded with useful features like offline booking, PayPal and coupon integration, support for unlimited events and more. 

There's no shortage of shortcodes, and everything can be customised so that it integrates into your WordPress theme seamlessly. 

User Pahtreaq says:

"Great plugin that's rather easy to work with".

9. Events Schedule

 Events Schedule

Events Schedule is a simple WordPress calendar plugin that offers 12 unique schedule styles, each with different designs and features that can be modified with one click. Each style is suited to a different kind of business.

There are certain features that each template shares, like an elegant pop-up that provides more information about an event when you click designated areas of a calendar, the ability to assign certain details that make it easy to filter information in the calendars, and call-to-action buttons that you can insert to convince visitors to interact right away with your offer.  

User cjouper says:

"Has great template options for different ways to display calendars, depending on your content. When I needed help from tech support it was very quick and efficient. Highly recommend!"

10. HBook


HBook is a hotel booking system which is perfectly suited for anybody owning a business in the hospitality industry, be it a hotel, holiday apartment, or B&B. The booking system allows you to provide an online reservation system for your guests on your WordPress website. With it, you can add availability calendars, table rates and booking forms to your website quickly and easily. 

User emiliegrau says:

"Great customer support. Great plugin to take direct bookings from your own website. Nice integration with your own theme. You can also sync with major booking platforms."

Choose the Best WordPress Event Calendar Plugin for You

Today we've looked at the ten best WordPress Event Calendars for 2019. Obviously, the one you choose will depend on your specific needs. Give one of these calendars a try and let us know what you think in the comments below. 

Meanwhile, if you're interested in more options for calendar and booking plugins, check out the super helpful articles below. 

  • 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
  • WordPress
    Get Started With a Free Booking Calendar Plugin in WordPress
    Sajal Soni
  • WordPress
    How to Create a Google Calendar Plugin for WordPress
    Ashraff Hathibelagal

September 16 2019


20 Examples of Bad Website Designs to Avoid

Websites are like our second home. A website works as your online image and is judged upon harshly by your users. This is the reason that making a great design for your website is very important. However, sometimes the websites really don’t look how they should, or how you originally envisioned them after they are coded from design into live sites. Following are 20 examples of bad website designs which would help you to avoid such mistakes in your website creation. Some websites made it to this list because their design elements serve no purpose, while others are so user-unfriendly that we had to include them. Please note that some of these websites are very well known. “Bad design” can be quite subjective, so before you leave comments disagreeing with our list, please keep that in mind :) If you have more websites to add, or want to comment on anything written in this bad website designs roundup, please don’t be shy to comment below.


We very well know that too much of something is bad for us, mentally and physically both. This same goes for everything in the world, all and around us. The website is overcrowded with content and information, which makes it look average and confusing in every way. The title of the page is not measured and aligned as per the website fundamentals as well as the layout of the website is not designed well; this is the reason it all goes bad. The website does not follow any theme, which makes it all look visionless. There are a search button and toll-free number right at the top, intended to help the visitors, but the display makes it look all messy and unorganised. Also, the typography used on the website is entirely different on every page. The basic pointers in the website are missing, which makes it rank first in the list of bad website designs to check for.


Elephant Media SD is designed for the sake of designing. It is a website for background wallpapers, the art created by various artists. The website is created by a layman who is unclear about the mission and vision of the owner. It has URL of the website as the title and logo of the website, which is the first No! No, when it comes to design segregation. The search bar on the top serves no purpose until the users are not informed about the main aim of the website. It does not have page breadcrumbs on the top or in the footer, which makes it difficult for the users to navigate through the website along with knowing the available information on the same. It would gain no SEO benefits, as there is not a single thing designed as per the Google algorithms and ranking schemes.


Shillington Education is a great one-page website, crowded with several elements on the home page itself. It is a multi-purpose website providing designing courses on the same platform. There are no page breadcrumbs on the top, making it difficult for the users to understand the purpose and mission of the website. It has a full footer which shows different time zone icons for NewY ork, London, Sydney, Melbourne etc. Also, the social media icons are not well displayed, which makes it look messy at the end. The website has low loading speed and is not very responsive.


As soon as we enter the website, we find too much content and information which is almost impossible for our mind to accept and remember. The designer has tried to infuse all the information considering it all-important, which surely it is, but is not going well with the design structure. The call to action icon is too big for the first look of the website and also acquires a lot of space, leaving no space for other relevant information. The offers are displayed on the right-hand side of the website, in white; not visible to the users due to the background, jam-packed with colours. It is a very great website with an ultra-long and choking footer. The website is not constructed keeping the SEO and search engines in mind, which makes it challenging to rank on the top, in spite of having relevant content on the website.


Irish Wrecks is a small one-page website. The purpose of the website is to provide guidelines about wreck shipping to the Ireland shipping industries. It is a simple website with no menu bars or any form of icons on the page, except for the awards and advertisement section. It has three bars on the website which has broken links and hampers the user experience and traffic on the website. The lack of About Us page or other information about the company leaves the user searching for more details. At first glance, it is considered as a mal-practised website to the users and would divert them immediately.


Securities And Exchange Board Of India is again a perfect example of bad website design. The website is over-crowded with content, making it look all untidy and messy for the users. The website has very poor user experience, and it is challenging for the users to get any information which he or she is looking for. It has a live news button flashing on the top, which makes it even more difficult for the users to track the news in the first few seconds, leaving the user feel irritated. The footer is unsegregated and filthy due to lack of proper structuring style.


Stack Exchange has an awful start. It states about the Question and Answers of the community on the top of the homepage, which should ideally be inside expertise or speciality section under the page bread crumbs or menu. As soon as we scroll down, we see an entirely separate part of FAQS that long till the end of the website. The website has a slow loading speed compared to other websites, which make the website bounce back rate very high.


StudioMix is a medium-sized gym work out website with a forte in San Francisco. What brings it here in the list is the cumbersome call to action as well as tangled footer of the website. The design changes the entire purpose of the website as instead of showcasing it as a health knowledge-driven platform; it is entirely portrayed as an advertisement platform. Also, alter to Alt Tags, the content is displayed in the written form under the page bread crumbs, which makes it look awkward as well as take away space for important information.


Hipmunk is a short one-page website. It is a luxury travel and logistics company, providing deals for best hotel, flights and cars during travel sessions. The layout is not at par with the others in the market as it showcases the call to action form, as soon as the user enters the website, leaving no space for discovery and understanding the company and its services in real sense. Also, it has a testimonial section in the middle of the website, which again makes it look like the website is just focusing on conversion and not for providing relevant information to the users.


Carte Noire is an e-commerce website which is focused mainly on selling and not on user experience. It serves a very bad user experience due to the heaps of information and images on the website in the form of actual pictures as well as background images. The typography of the website does not go hand in hand with the layout of the website, as there are different kinds of fonts used on a single page, which makes it confusing for the users as well as search engine bots to crawl and index the website.


BH cosmetics is a short one-page beauty website which focuses on the selling of beauty products as well as providing information regarding the usage of the same. It has a very eye- hurting flash up, showcasing the ongoing season sale. The colour and typography of the website should complement each other, which is a different case in this website design. It also has a bad interface design due to the selection of flashy images and uneven font size on every page.


Gates and Fences were built by an over-enthusiastic person who wanted to infuse all the information of the world under one roof. It is a website which provides gate building and fence building services for home and offices. The main reason for it being here on the list is the excessive content on the website. It does not have a specified menu or page bread crumbs to help the users navigate on the website easily. The contact details are displayed right on the top, which hides the name of the website.

13. KAYAK:

Kayak is a company associated with and caters to providing travel services to the visitors. The content is excellent but is not highlighted due to the construction and layout style of the website. The call to action bar flashes right on the top of the website, which takes the users directly to the checkout options, leaving no time to explore other services on the page. It is also not too responsive.

14. MY US:

The website has major white spacing issues which bring it to this very list. It is full of information but is not segregated well, which makes it look all cluttered and nasty. The typography used on the website varies in size and shapes at every level, makings it confusing for the crawlers while indexing the important content. It is advisable to use heading tags at every stage to help the bots to crawl and index your website for ranking purpose.


It is a very great website, providing travel tips and packages to the customers who plan to travel around the world in the cheapest possible way. The motive behind the website is good but is destroyed by the construction and layout of the website. The call to action menu occupies the entire front page space of the website, hiding the other relevant information. The icons used are too big and occupy most of the area for irrelevant details.


The interface of the website is smooth and exciting. The only reason which brings the website here in the list is the long list of bread crumbs on the top of the page. It is good to provide information, but it is also advisable to cut it short into different sections, which will make it easy for the users to navigate. It has a call to action button at every stage, which makes it look a little promoting kind instead of a simple e-commerce one.


Grace fellowship is a small one-page website based on the mission of helping the community in their motivational genes. The website has less content compared to other websites but has too much white space, which gives it a scattered look. The typography of the website is very poor compared to the overall construction of the website. The lack of information on the page increases the bounce-back rate.


The website is too colourful and informational, which makes it look gaudy to the eyes to the users. The live update animation on the website hampers the usability and user experience of the visitors, making them divert to other platforms for the same information. If this is optimised well, the website is quite informative and can work wonders for the visitors.


The website has illogical reading areas which make the readability and accessibility ratio quite low. Also, the interface is poorly designed, making it an average website in the eyes of the crawlers as well as visitors. It is also not too responsive, which increases the surfing time of the users without gaining any extra information to their requirements.


The huge pop-up in the very first goes hides the primary information on the website. The website is designed for tourists and can be accessed in multiple languages, but the website is not well structured, which makes it difficult for users to navigate. This consumes a lot of time of the users as well as the crawlers, which in turn increases your crawling budget.

Now, as you know how bad designs end up, we are sure you will follow all these proper measures before creating a perfect website for your clients.

The post 20 Examples of Bad Website Designs to Avoid appeared first on Line25.

40+ Motivational Quotes for Creatives

How to Add an Appointment Booking Calendar With a WordPress Plugin

The internet has revolutionized many services that before were tedious or time-consuming. Booking an appointment is a great example. Booking online not only saves time for the user but also the service provider.

  • 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

An appointment booking plugin makes it easy to manage their visitors, appointments and schedules in a well-organized manner. Business such as salons, spas, law offices, hospitals, and clinics can benefit from such a system. I'll show you an easy way to add one in this tutorial.

If your business requires people to book appointments or reservations, a booking plugin can be a huge help. In this tutorial, I'll outline the steps you need to get a booking calendar plugin up and running on your site. We will use the Booked plugin to create an appointment booking calendar.

Features of Booked


The Booked plugin can sync with calendars such as Google, Outlook, and iCal, thus making it easy to add reminders on devices. This feature allows visitors to insert appointments with their preferred calendar.

Add-Ons and Integrations

Booked accepts WooCommerce payments which allow your visitors to purchase appointments. It also includes other add-ons such as a calendar feed that allows you to display your appointments with apps like Apple Calendar or Outlook. 

Guest Booking

Booked allows new users to book appointments simply by providing a name and email address.

Powerful Back-End

Booked features a powerful admin back-end which allows the admin to manage all appointments.

Fully Responsive

Booked is fully responsive both for the end-user and admin. It can, therefore, be accessed via a mobile device without any difficulties. Business owners can also view and manage appointments on the go.

Post as Widget or Shortcode

The process of adding a new calendar involves placing a shortcode on the page where you wish to display the calendar. Or, you can add the calendar to your layout with a widget.

Booking List View

Booked also allows you to display available appointments as a list hence providing an overview of available time slots.

Custom Forms

Booked allows you to customize the login and registration form, and embed it anywhere using a shortcode. You can also create custom forms and mark them as required.

Color Picker

Booked also comes with a built-in color picker that allows you to create a calendar that matches the theme of your site

Multiple Calendars

Booked allows you to add multiple calendars, each with their own custom fields and time slots. These calendars are in turn assigned a booking agent to manage them

Getting Started

Start by downloading the Booked appointment plugin from CodeCanyon. Once you purchase the plugin, you will get a link to the downloadable files. Alternatively, you can find them in the download section of your account with your other purchased items.

Once you download the WordPress files, log in to your WordPress site, go to Plugins > Add New, and upload the zip file. After uploading, click Install Now, wait a few seconds, and then click Activate. You can now start using the plugin.


Once installed, you'll need to configure the time and date settings from within WordPress. Go to General > Settings and set your preferred settings for:

  • timezone
  • date format
  • time format 
  • the day the week starts on (Sunday or Monday)

Next, you need to provide a way for users to book appointments. Booked provides both guest and registered user booking options. Guest registration ensures that your visitors don't have to remember login credentials.

Next, set the appointment redirect after successful appointment booking. There are two options available: no redirect and redirect to a particular page. Other important settings in this section include:

  • appointment time slots
  • appointment buffer
  • cancellation buffer
  • appointment limit
  • display options
  • color settings 


Booked allows you to create and display multiple calendars for each of the services you offer on your site. Each calendar will have default timeslots, custom fields, and slots.

To create a new calendar, go to Appointments > Calendars, assign a unique name, an optional slug URL, a description, and an administrator.

Booked assigns each calendar a unique id. Once you have this id, you can display the booking calendar with the use of a shortcode .

add a calendar

Time Slots

A time slot is the length of time allocated to an appointment. Booked provides the ability to assign multiple timeslots to calendars. When a client clicks on a calendar, they will see the available timeslots and then choose to book one that is convenient for them.

To add custom timeslots go to Settings > Custom Time Slots and click on Add Dates. Choose the calendar you want to assign the time slots, the start, and end dates and finally add your preferred time slots. If you don't have any custom calendars, the slots will be assigned to the default calendar. 

You can add single or bulk time slots depending on the number of staff available

Displaying Calendars

Now that we are done with all the required settings, you can display any calendar on any page via the use of a shortcode. Booked provides unique shortcodes for each calendar. To get the shortcode for a calendar, go to Settings > Shortcodes and copy and paste the shortcode into the page where you wish to display the calendar.

Booked also provides the following additional shortcodes:

  • user profile shortcode: this will display a user profile
  • user's appointments shortcode: this will display all of a user's appointments
  • style shortcode: this allows you to choose between a list view or the default calendar
  • switcher shortcode: this allows you to display the switcher
  • year and month shortcode: this lets you display a specific year or month

A typical calendar will look something like this:



Booked is the perfect solution if you are looking for a simple and easy-to-use booking solution for your business.  This plugin also allows clients to view and manage their appointments via their client section. CodecCanyon also offers many other booking calendars with out of the box solutions if you wish to explore more options.

  • 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

September 15 2019


Best WordPress Quiz Plugins of 2019

A great way to improve website visitor engagement and get potential business is with quizzes. A quiz does not necessarily need to have academic questions. You can use one to help visitors figure out which product they should buy or books they should read, for example. Quizzes can also be created just for fun or to learn more about your visitors.

We have already created a post which provides a list of the best free WordPress quiz plugins

  • WordPress
    Best Free WordPress Quiz Plugins
    Monty Shokeen

However, free plugins are generally lacking in features and don't offer support in case you get stuck. Sometimes, you might also have to be content with the plugin branding that is added to all your quizzes with free plugins. If you are looking for the best premium WordPress plugins, offering a lot of features and free support, this post will help you out.

1. Advisor Quiz

Advisor Quiz is a great plugin which comes with plenty of features like multiple layouts, full customization, and support for ads integration.

Advisor Quiz

You can create regular trivia quizzes where visitors can test their knowledge by answering some questions. Two other types of quizzes called content filter and personality quizzes can also be created in a similar manner. They will allow you to provide users with some additional insight or product recommendation based on their answers.

There is one more quiz type that you can create, and it is called the count quiz. It can be incredibly helpful in certain situations.

Let's say you run a travel-related website where users can find information about vacation destinations. A visitor arrives on the website looking for some recommendations. Now, you can show them a simple quiz where they are shown some famous tourist spots. They can then select all the places that they have already visited. After answering a couple more questions, you will be able to suggest some new places that they can visit based on places they have already visited. The same concept can be applied to recommendations related to anything from food to movies or more.

The plugin comes with powerful analytics that let you track all quiz-related data. For example, you can see how many people started a quiz, successfully submitted their answers, clicked on the products and services you recommended, and so on.

The quizzes can be easily embedded in your posts using simple shortcodes. Don't forget to check out the live preview of the plugin where you can test out all the features.

2. WordPress Viral Quiz

The WordPress Viral Quiz plugin is currently the top-selling WordPress quiz plugin on CodeCanyon. You can use it to create personality or trivia quizzes which have a tendency to go viral. If your quizzes do get shared around by a lot of people, you will get more views and in turn more revenue.

WordPress Viral Quiz

For example, let's say you create a quiz where people answer some trivia questions about a popular movie star or TV show. In the end, the quiz displays their scores and shows them buttons that they can click on to directly share their results as well as the quiz itself with people on social media. You can also create quizzes where you give people an explanation for the answer of each quiz question after they submit their choice.

To increase the chances of more people seeing your quizzes, you can also set up the plugin in so that users only see the result when they share the quiz on social media. Similarly, you can build your email lists by asking users for their email address where you will send them the results of the quiz.

The plugin can be used to create quizzes with either a Buzzfeed theme or a modern flat theme. The questions in the quizzes can be randomized for different people. The quizzes you create are fully responsive and can be extended to multiple pages. The appearance of the quiz itself can be easily customized with your own CSS.

You should definitely check out the demo page of the plugin to see the kind of quizzes that you can create with it.

3. Modal Survey Quiz Plugin

The Modal Survey Quiz plugin allows you to create quizzes in the form of a poll or survey. These quizzes can be embedded directly into the posts or shown as a pop-up in a modal.

Modal Survey Quiz Plugin

You can either show the aggregate results of any poll or survey to visitors on the front-end of the website or you can see the results yourself on the back-end. This should help you make constant improvements to your website and help improve engagement or revenue.

The results of a survey are represented visually in order to make them easier to analyze. This is done with the help of a variety of charts.

The plugin can also be used to create other kinds of quizzes like a trivia or personality test. The trivia quizzes are created in a way that encourages visitors to share them on social media. You can also put a time limit on the quizzes that you create.

There are a lot of settings to customize almost every aspect of the quizzes. This includes font, padding, border, and background color. The plugin also gives you the option to trigger a quiz based on certain events like a user clicking on a link or scrolling to the bottom of the webpage. You then have the option to give users the ability to close the quiz pop-up or force them to answer the questions in order to get back to the content.

Quizzes can also consist of star ratings or images as part of the answer. For example, when asking users how satisfied are they with the delivery time of their orders, you can create a quiz with answers ranging from a one-star rating to a five-star rating. Using images and other graphic elements instead of plain text can help keep things more interesting and increase engagement.

The feature list does not end here. You should definitely check out the plugin description page in order to read about the rest of the features. Also take a look at the demo where polls and surveys are embedded seamlessly into the webpage.

4. ARI Stream Quiz

The ARI Stream Quiz plugin also aims to increase your website traffic by helping you create viral quizzes easily.

ARI Stream Quiz Plugin

Many features of this plugin are similar to the WordPress Viral Quiz plugin. For instance, it also comes with a Buzzfeed style theme and a standard theme. It gives users the option to share their result on a variety of social networks like Facebook and Twitter.

Some other features of the plugin that you might find interesting include the ability to show the questions in a random order or to shuffle the answers. The content on the final result page can also be customized based on the user's score.

You can embed the quizzes into any post or page using shortcodes. The statistics for each quiz are available in the admin dashboard. You can also export the results to a CSV file.

Give the demos of ARI Stream Quiz a try and see if you like the plugin.

5. Quizmaker

The Quizmaker plugin is specifically designed to help you create tests and exams for academic purposes. You can use these quizzes to evaluate how much the students who have taken a particular course learned from all the lessons.


You can use the plugin to create many types of questions where users can select the right option from a dropdown menu or mark multiple correct answers using checkboxes. Similarly, users can input the answer in a simple text input field or write essay type answers.

You can create unlimited tests, and each test can have as many questions as you want. The questions in each quiz can be ordered randomly. The plugin also gives you the option to either show the same questions to everyone or select questions randomly from a large set. These two features by themselves can bring a lot of variation to the test.

If users solve a question incorrectly, you have the option of showing them the correct answer and its explanation either at the end of the quiz or as soon as they answer the question.

A single quiz can be assigned either to individual users or to a group of users.

The plugin also comes with a certificate composer which can be used to easily create some simple certificates to be given to users upon successful submission of a quiz. Different certificates can be assigned to different test scores for the same quiz.

The plugin offers multi-language support, and you can easily import questions from a CSV file. Similarly, you can also export the test results to a CSV file.

You can test all the features of the plugin yourself by taking some quizzes in the demo.

Final Thoughts

This article briefly summarized the features of some of the most popular and best WordPress quiz plugins available on CodeCanyon. Make sure you check out the demos of these plugins, and you will notice that they offer a lot of features compared to the free alternatives.

These plugins focus on the features as well as the appearance of the quiz so that the end result looks very premium and polished. You also get free lifetime updates and free support for six months to resolve your problems quickly.

Which of these plugins is most suited for your needs? Let us know in the comments.

  • WordPress
    Best Free WordPress Quiz Plugins
    Monty Shokeen
  • WordPress Plugins
    How to Create a Trivia Quiz with Viral Quiz for WordPress
    Daniel Strongin
  • WordPress
    20 Best WordPress Login Forms on CodeCanyon
    Eric Dye

September 13 2019


Getting Started With the MStore Pro React Native App Template

Building a React Native app from scratch can be difficult. Setting up the initial project can be complex and annoying, especially for those who work primarily on web applications.

How do you deal with the command-line interface? What is exporting your project? These questions pop up, and for your first few apps, they'll seem like a mystery.

Not only that, but the transition to building native apps can be a shock. Responsive designs behave differently on smaller screens, and things like status bars have to be planned for.

This is where templates come in handy. Allowing you to skip over the initial setup and creating a framework to work within, they can become one of the best tools in a React Native developer's kit.

A number of templates are available at CodeCanyon, along with many more tools for developers. You can also find different kinds of templates geared to specific niches, helping to cover ground on functionality only common in certain industries.

In this tutorial, we'll take a look at how to use the MStore Pro template. This eCommerce app template for React Native helps you get an online store going quickly, and has a number of features you're going to love. Let's get started! 

You can also read how to use MStore Pro to make a mobile app for your WooCommerce site

  • React Native
    Creating eCommerce Apps With the MStore Pro React Native Template
    Ashraff Hathibelagal

Getting the Template From the Marketplace

You can download the template by going to the MStore Pro product page at CodeCanyon. Though it's a paid template, MStore Pro will help to reduce your development workload significantly. It'll take care of the most common functions and screens, and you just need to alter the design and hook it into your existing store (if you have one).

To give you an idea of what it offers out of the box, here are some of its top features:

  • Full integration with WooCommerce: if you're running a WooCommerce website, the app can display the same products which you have on your existing website.
  • Support for both iOS and Android: the app runs and looks good on both Android and iOS platforms.
  • Social logins: customers can log in using their Facebook or Google account.
  • Easy customization: everything is broken down into components. This ensures that you can easily customize the template based on your brand.
  • Push notifications: this automatically alerts your customers when there's an update to the status of their order. You can also send out push notifications for product promotions. Push notifications are implemented with Firebase.  
  • Multi-language support: out of the box you get English as the main language. Vietnamese exists as a second option, but you can also add your own language.
  • Secure payment integration: payments are done with PayPal.

If you don't have an Envato account yet, you can sign up here. Once that's done, log in to your newly created account. Then you can go back to the MStore Pro page and click on the Buy Now button. 

Setting Up the Project

Once you've purchased the template, you'll get a download link to the template's archive file. Extract that and you'll get a CodeCanyon folder which contains MStore 2.2.

MStore 2.2 is the directory for the template project. Go ahead and open a new terminal window inside that directory and execute the following command:

This will install all the project dependencies. This may take a while depending on your download speed, because it has to download a lot of dependencies. Take a look at package.json if you want to see the packages it needs to download.

Once that's done, there's an additional step if you want to build for iOS devices. Go to the iOS folder and execute the following:

Next, for Android, connect your mobile device to your computer and execute:

This will list all the Android devices connected to your computer. If this is the first time you're connecting the device, you should get a prompt asking you if you want to allow the computer for USB debugging. Just tap on yes once you get that prompt.

Now you can run the app on your Android device:

For iOS:

If you didn't encounter any errors, you should be greeted with the following page:

MStore Template Home page

To give you an idea of the different pages available in the template, here are a few more screenshots.

The template comes with a complete, customizable multi-step checkout form.

Multi-step checkout form

There is also a cart review screen that makes it easy for users to view or modify the contents of their cart.

Cart review screen

The template comes with a product detail screen for getting more information about a product.

Product detail screen

Last but not least, the template comes with a complete, working login flow, including support for social login.

Social login screen

Troubleshooting Project Setup

In this section, I've compiled a list of common project setup errors and their solutions. 

Development Server Didn't Start

If the development server didn't automatically start when you executed react-native run-android or react-native run-ios, you can manually run it by executing:

Watcher Took Too Long to Load

If you get an error similar to the following:

This is because an existing Watchman instance is running. This is a component of the React Native development server. You can solve this error and shut down Watchman by executing the following commands:

Could Not Run ADB Reverse

If you're getting the following error:

It means that your Android device is running on a version that's lower than 5.0 (Lollipop). This isn't actually an error. It simply means that your Android device doesn't support adb reverse, which is used to connect the development server to your device via USB debugging. If this isn't available, React Native falls back to debugging using WiFi. You can find more information about it here: Running on Device.

Something else might be causing your build to fail. You can scroll up the terminal to see if there are any errors that happened before that.

Can't Find Variable _fbBatchedBridge

If you're getting the following error and the development server is running in WiFi mode, this means that you haven't set up the IP of your computer in your Android device. (This usually only comes up with Android devices below version 5.0.)

You can execute the following to show the React Native developer options on your device:

Select Dev Settings from the menu that shows up. Under the Debugging section, tap on Debug server host & port for device. Enter the internal IP assigned by your home router along with the port in which the development server is running and press OK:

Go back to the home screen of the app and execute adb shell input keyevent 82 again. This time, select Reload to reload the app.

Could Not Find Firebase, App Compat, or GMS Play Services

If you're getting "could not find" errors, this means you haven't installed the corresponding packages using the Android SDK Manager.

Here are the packages that need to be installed:

  • Android Support Repository
  • Android Support Library
  • Google Play Services
  • Google Repository

Make sure to also update existing packages if there are any available updates.

Other Problems

If your problem doesn't involve any of the above, you can try the following:

  • Check out the documentation on troubleshooting.
  • Check out the template product comments. You can search for the error you're getting. Try to generalize and shorten the error message, though—don't just search for the entire error message. If you can't find the error, you can try asking your own question in the comments thread. The support team usually replies promptly.
  • Try searching for the error on Google. Even if the results you find don't involve the use of the template, they will give you an idea on how to solve the problem.
  • Search on StackOverflow or ask a new question. Make sure to include all the necessary details (e.g. the error message and any steps that you've taken). There's a good article about how to ask questions on StackOverflow.

Customizing the Template

A good place to start learning how to do things in the template is its documentation:

  • API and Project Structure: shows where to find the different files in the template and what they're used for.
  • WooCommerce Settings: shows how you can hook up your existing WooCommerce website to the app. Hooking up the app to your WooCommerce means that it will be able to fetch all the product categories and products in your WooCommerce store. 
  • Customize the App Branding: shows how to customize the theme for your own brand.

Be sure to check those out! I'm not going to repeat what was mentioned in the documentation. Instead, what we're going to do in this section is to actually customize the template so it looks the way we want.

Most of the project configuration settings are stored inside the app/Constants.js file. Here are a few examples of things which you can change from this file:

WooCommerce Integration

The URL of the WooCommerce store being used by the app. By default, this uses

Social Login Options

This is implemented using Auth0, an authentication platform. By default, the template only supports Google and Facebook sign-ins. But you should be able to add any service which Auth0 supports.


You can use any icon from Font Awesome, but you should prefix the name with ios-.


Colors for the different components that make up each page can also be updated. For example, if you want to change the header background color, you can update the value for TopBar:


The splash screen and other images can also be updated by specifying a new path to each of the following:

These images are stored in the app/images directory; you can simply replace them if you don't want to keep the old images.

PayPal Options

You can also change the PayPal options from this file. Be sure to create your own PayPal Developer Account to obtain the clientID and secretKey. Don't forget to update sandBoxMode to false when you deploy your app to production, because by default it uses sandbox mode so that no actual money will be spent on transactions.

Customizing Individual Pages

To customize individual pages, you need to go to the app/containers directory. This is where you will find the files for each page. For example, if you want to customize the home page, navigate to the home folder and open the index.js file. Once opened, you'll see that the page uses the <ImageCard> component to render each product category. So if you want to add a general styling for the <ImageCard> component, you have to update the app/Components/ImageCard/index.js file. Otherwise, you can simply update the styles within the page itself:


With your app up and running, you can now start to dig in further. We barely scratched the surface of MStore Pro, but with the documentation in hand, you should have no problem finding out what to work on next.

For those with WooCommerce sites, hooking it into your online store should be next on the docket. Otherwise, try changing around some of the components or altering the design to fit your own brand better.

Download the template now, or If you want to learn more about it, you can check out the documentation. You can also find many more React Native app templates on CodeCanyon.

You can also read how to use MStore Pro to make a mobile app for your WooCommerce site

  • React Native
    Creating eCommerce Apps With the MStore Pro React Native Template
    Ashraff Hathibelagal

September 12 2019


Web Designer vs Web Developer – Who Are You And Who Should You Be?

Things are not always what we think they are. This is the reason some of our assumptions are named as myths by our experts. The role of a web designer and a web developer always involves many such myths, which we are going to explore in this web designer and web developer comparison article.

Being a web designer or web developer is the most demanding career as of now, as everybody is looking for a business online, and everybody realizes the importance of an online identity. This is the reason people have started hiring web designers and web developers to build their online business sites or to manage their existing websites. Nowadays, graphic designers may even hire web developers to build them a portfolio website, as every company asks for the portfolio to decide the candidate’s experience and skillset. There are also website builders like Wix, Godaddy, and a few others on the market, which allow one to build their website without the knowledge of any coding. However, it is almost impossible for a layman to make a website on his or her own without a basic understanding of typography, color scheme, layout, and other technical knowhow. Because of that, web designers and web developers stand out in their respective junctions.

In case you are thinking of pursuing a career in the web design or web development field but are not sure which one to opt for, then you must first read on for guidance to clarify your myths about certain essential factors regarding these career fields. However, before that, make sure you know what the exact role of each professional is:


As the name suggests, in simple words, the web designer is someone who designs the web. Web in earlier times was known as the internet where you could just get relevant information about your research. But, in today’s time, the web is everything you see online with the use of the internet. The role of a web designer was not identified in the first few years as there was no focus on creating a brand image, due to monopoly situations. Nowadays, as the businesses are growing in a competitive world, everyone wants a special touch of their brand on the website. At present, web designers play a huge role in creating an overall experience for the users who visit your website. The purpose of web designer was identified as to decrease the bounce-back rate of the audience, for once, if the user can get a smooth and hassle-free experience, which would allow them to stay back on the website and explore more business services. Web designers create a creative as well as user-friendly experience to improve the journey of the users on the client’s platform. 


A web developer is the one who develops the web, i.e. from scratch until the website goes live. The web developer is the first field that was recognized when this web structure was started. The web developer develops the website through multiple different coding languages like HTML, Java, PHP, .net, CSS, Python, etc. The primary role is to improve the inner stricture of the website for the outer display and navigation. Navigation plays a significant role in any website, and it is entirely designed and developed by the web developer. One more key skill required by the developer is data management. The entire data of the website is stored in with a complex hard-coding process into different web pages of the website by the web developer. Learning data management would help the developer to segregate and assign the data into distinct and specific departments for easy utilization of the same. Now-a -days, web developer also needs to learn WordPress along with other analytical skills for creating a user-friendly as well as crawler-friendly experience of the website.


If we look at the broader perspective, we may find web development and web designing merge at the end; somewhere. It is all connected at some point and would require in-depth analyses to find the thin line of difference. Both roles are often considered a synonym to each other, wherein reality; the actual roles are quite different from what is anticipated. This is the reason, before proceeding into the field, it is better to understand the role in the real sense by eliminating the myths associated with it, since its inception. The courses for both are quite different in a sound stage, while some of the concepts and theories are common in both.


Web designing is all about designing. We know it right. But there are some stages where the designer would require coding in real-time. Most of the designers understand the necessary coding concepts and can make their changes. The designer is required to learn to code as it works as a time saving and handy tool for them at the time of changes. The web designer needs not to have to learn hardcore coding for designing a website, and just HTML, Javascript, and CSS basics would be enough for them. It is more helpful for the front end web designer as he has to work for the visual and user experience of the front end design of the website.


Web development does not require you to have a thorough knowledge of the designing concepts but would require you to understand the fundamentals of designing along with understanding the user experience, while creating a live website for the user. If it is not recognized, then the website would just have a smooth backend and would be incapable of attracting new users. 


We have a mindset where we think anything which does not involve coding is easy. In the real sense, web designing is equally or more difficult than web development, as it requires critical thinking, which is user-friendly as well as attractive. The web designer has to work hard to connect creativity and simplicity in the same place, making it the toughest job in the world.


Coding may not involve spice like designing, but it is not at all boring if you like to learn about how a particular thing is made and you like to create your stuff. For every element, the developer has to mix several concepts and make a single code to highlight the feature on the screen. It involves researching and experimenting at every stage, which makes it an exciting job.


The production of the product includes more cost compared to the designing of the product. In the same way, the development of an entire website involves a higher price compared to the designing and the external appearance of the website. In today’s time, it is equally important to have a good, visually attractive design along with a smooth user experience of the website, which is designed by the web designer. The salaries of the web developer and designer are on equal scale at present.


Rome wasn’t built in a day. There is a long brainstorming session involved in web designing before the actual work, which makes it a time-consuming process. Web development has some pre-decided layout which eliminates the research part; unless in web designing, which makes it more complicated. The process gets more comfortable and speedy, once the basic concepts of designing are learned and implemented. If you are a perfectionist, which you should be, then it would require time. There is no shortcut to creativity.


As per the ranking purposes, both the skills are equally important in creating a perfect website for the businesses that grow so fast in the start-up’s era.  One is for the backend of the website, and one is for the front end of the website. If anyone of them does is not supportive enough, then it would crash the entire motive behind creating the website in the first place.

  • Web designing is necessary for bringing audience to the website through its creative visuals and graphics while web developing is necessary for hooking the users for the website as the entire information is stored by the developer in the backend of the website, along with designing navigational structure to guide the users for coming back to the homepage, in case lost.
  • The web designer is more focused on the user experience and journey of the website while web developer is focused on the details like loading speed, bread crumbs structure, sitemap of the website, etc. which helps the user as well as crawlers.
  • Web development is all about programming and does not have any role or responsibility in case the website is not appealing enough to the users while web designing is all about creating an appealing and attractive image of the website in the eyes of the users. The designer is not worried if the website is loading in 3 seconds or 30 seconds.

After rectifying the myths of both the fields in your mind as well as drawing out a comparison, you may still be undecided about what to opt for. It is entirely dependent on your viewpoint and interest.

If designing triggers your brain cells and creates dopamine in your body while thinking about the user experience, then you should go for Web designing. In this case, you should be ready for 101st change in the design as per the client’s requirement as well as should be able to handle criticism on a lighter note. Your primary focus would be the layout of the design which would be created with the help of Adobe Photoshop, Illustrator, XD, and Sketch, etc. which would impress the users and allow them to visit the website. Also, you would have to learn primary coding languages in case you plan to opt for freelancing services in the future.

On the other hand, if you are always keen on knowing how something is made the way it is made and what is involved in the making process, then you should opt for web development. In this, you are required to construct a website through different codes and other programming structures for a smooth working website. In old times, developers were all independent as there was no interference of the client due to their aliens towards the concepts. However, in today’s time, the scenarios are quite different. The entire burden of SEO and changes related to it are on the heads of the developers as without following the basic SEO concepts, the website won’t rank higher in the eyes of search engines.

From our viewpoint, it is good to become a web designer as it would involve creative and critical thinking of the concepts. It is more complicated and challenging than the web developer’s job, but it always gives you the freedom to brainstorm your ideas and concepts for converting into realities.

Times are gone when you just needed one skill to master a particular field. Now, after the invention of the World Wide Web, everything is getting connected in some of the other form, which makes it very necessary to be a jack of all along with being a master of one. This also means that if you are choosing to be a web designer, then you must also learn the side skills required to build a perfect website. The user should not only get a smooth feel of his journey to your website but should also get a hassle-free and speedy experience which would come with learning and understanding other relevant skills during the process. One should start learning web designing, and once it is done while practicing the same concepts, one can begin to learning other skills along with it to experiment it during the live work.

The post Web Designer vs Web Developer – Who Are You And Who Should You Be? appeared first on Line25.

Top Prototyping and Design Handoff Tools for Designers

September 11 2019

Illustrator Tutorial: How to Create an Icognito Icon
How to Create a Summer Themed Icon Pack
Building More Accessible Websites with WordPress

How to Create a Mailchimp Subscribe Form Widget for WordPress

In this tutorial I’ll explain how to create a “Mailchimp subscribe form widget” using WordPress, the Mailchimp API, and AJAX. It will be aimed at competent beginner developers, and requires some understanding of PHP and WordPress development. There’s a lot to do, so let’s get stuck in!

A Quick Note on APIs

“The web has gotten really "API-ish". By that I mean, almost every major site is pushing and pulling content to and from other sites.” – Scott Fennell

I’ve covered APIs a couple of times in recent tutorials, so for a quick definition and to help you get up and running with REST APIs I recommend you take a look at these two resources:

    How to Use the WordPress REST API: A Practical Tutorial
    Karen Pogosyan
  • WordPress Plugins
    How to Incorporate External APIs in Your WordPress Theme or Plugin
    Karen Pogosyan

As far as Mailchimp’s API and REST goes, from the documentation:

“Most APIs are not fully RESTful, including the Mailchimp API. But Mailchimp follows most of the practices and common definitions of the style. For example, the Mailchimp API has what we call “resources,” which are typically nouns like “subscribers” or “campaigns.” You take action on resources using the standard HTTP methods: POST, GET, PATCH, and DELETE.” 

Beginning the Mailchimp Subscribe Form Plugin

We will add our widget as a simple plugin called mailchimp-widget. I won’t describe in detail how to create a plugin, but I’ll provide some resources below to help you get started if you need them. Begin by creating a folder called mailchimp-widget and inside that folder create a mailchimp-widget.php file. Add the following File Header code snippet to the top of the file:

A REST API, as with any API, works with an API key. So at this point you’ll need a Mailchimp account, you’ll need to create a mailing list (nowadays referred to as an “audience”) and the API key. 

Mailchimp provides full and detailed information about how to generate your own API key. And as with any API, Mailchimp have also published very thorough documentation that we can refer to.

So here is our plan:

  1. First we will fetch your Mailchimp lists, so you can choose from the widget settings the list to which your users will be subscribed.
  2. Next we will build the widget itself.
  3. Then we will create the action that takes your user data from the Mailchimp subscribe form and sends it to Mailchimp using AJAX and the REST API.
  • News
    A Crash-Course in WordPress Plugin Development
    Jeffrey Way
  • WordPress
    Introduction to WordPress Plugin Development
    Rachel McCollin

Fetch the Mailchimp Lists

Let’s create a simple function that connects to the Mailchimp API using cURL, then caches the results in a WordPress “Transient” (a way to cache information).

At the top of your plugin add the Mailchimp REST API key as a constant:

Next, let’s create the Mailchimp connect function. The naming is optional, but should be descriptive.

This function requires several parameters:

  • $url – the Mailchimp REST API endpoint
  • $api_key – our API key
  • $data – the data we have to transfer to Mailchimp.

Inside that function add the following code:

As this function will be used to get results from Mailchimp, we need to build a query from our data and make it part of the url.

With that done we are ready to initialize a cURL connection. Add the following code after it:

And now using the curl_setopt() function we can pass the parameters to the curl_init we created earlier.

Whoa, Slow Down There Cowboy

Fair enough, let me explain what is going on here! 

  • As with any REST API connection we will need to specify the content type we expect to get and make a simple authorization using our API key. That is all dealt with in the $headers variable. 
  • Next we set the URL option. 
  • CURLOPT_RETURNTRANSFER is where we tell the curl not to echo the result, but instead write it into variable. 
  • After that we set the request type; the Mailchimp API supports POST, GET, PATCH, PUT, and DELETE
  • Next we specify the timeout in seconds. 

Then the final two options you can ignore; we use them to specify the user agent and set false to certificate verification for TLS/SSL connection. 

Now we can execute the curl and return the results. The full function looks like this:

If no API key is provided you will see an error message where you would otherwise expect to see the subscribe list select. 

Construct the Endpoint URL

Next up, let’s create the Mailchimp url with the api endpoint:

Information on API endpoints can be found in the official Mailchimp documentation.

We now need to check if a transient already exists; if not we should make a new Mailchimp list fetch, otherwise we will return the results from transient. This way we can save resources with caching. If there are no results we will show an error message. If any API key is provided I always use it as a part of the transient name, as a way of ensuring unique naming.

Fetch Mailchimp Lists

So now let’s fetch the Mailchimp list. Add the following code:

Here we send a request to Mailchimp using our previously created function mailchimp_connect() to get all the lists available. And as the result is required in JSON format we’ll need to decode it.

First let’s make sure that we have the results, otherwise we’ll display the error message:

After the error check, if we do have valid data and we have at least one Mailchimp list we add the Mailchimp list id and name to our mailchimp_list array. Lastly, if there is valid data, but no list, we display the second error message.

Now we need to encode, serialize and set the transient:

So the full function looks like this:

Build the WordPress Widget

As with plugin development basics, I won’t cover basic widget creation here, but ours will be a relatively simple widget and I will highlight the most important parts of it.

  • Creative Coding
    Building Custom WordPress Widgets
    Bilal Shaheen

Here is the full widget code, paste it inside your plugin’s main file at the end. The most important parts are the public function widget, and public function form.

Public Function Form

Here, using our previously created function mailchimp_list(), we fetch the subscription lists from your account and create a select with the data, so when adding the widget you can choose the list to which you want your users to subscribe.

Public Function Widget

Before anything else we enqueue the script and style files for the widget, so go to the top of your plugin and add the code, right after the Mailchimp API constant.

Be sure to create the js and css folders referenced here, and create the corresponding widget-mailchimp.js/css files inside those folders. The JS file handles the AJAX request and the CSS file adds basic styling.

After that we create the Mailchimp subscribe form structure itself. Here we have three fields visible to the user: 

  1. the fname: First name
  2. lname: Last name
  3. and email. 

Hidden Fields

Pay close attention to this code:

This is a very important part of the form; three crucial fields hidden from the user. 

  1. The first one is the list that the user will be subscribed to.
  2. The second one is the action that is required to handle the Mailchimp subscription functionality from the AJAX request. You can give any value to it, but remember it as we will need it in future. 
  3. And the last one is the nonce field that is used for validation. In other words this field value should be validated to make sure the request comes from our site.

And also take a closer look at the action and method attributes of the form:

Now if you go to Admin > Appearance > Widgets you will see our newly added widget. Add it to the widget area and you will see the subscribe form appear on the front-end!

Our newsletter subscribe form widget

Looking good! If you try to subscribe now nothing will happen as we haven’t yet created the AJAX and action handler yet. Let’s do that next.

Create AJAX POST and Action Handler

Open the JavaScript file we created earlier and paste the following (large amount of) code into it:

This is an AJAX POST that sends our form data to the Mailchimp subscription action handler that we will write in a moment. I broke the process into seven steps which you’ll see annotated in the snippet. 

At the top of the file, up to line 29, you’ll find an email validation function. Let me explain each of the other steps here:

  1. First we will need to prevent default submit behavior of the form so that it remains on the page and handles the request with AJAX.
  2. Next we serialize the input data both from the user and from our hidden fields.
  3. Next, before the submission, we need to make sure the email is valid.
  4. After that we make a simple AJAX POST. Here we need three parameters, the request type: POST, the url – the form action attribute, and the data that is our serialized data.
  5. And if the request is successful we send the data to our action handler and show a success message to the user.
  6. If there was an error, we should inform the user.
  7. And always after a success or fail we clean the form fields for future entry.

Now if you go to the front-end and submit the form you will get the success message, but the subscription won’t actually take place as the subscribe action is not yet created. 

Create the Subscribe Action

And so, for the last part. Go to the plugin’s main file and at the very bottom add the code:


Notice the last two lines, which are as follows:

The last part of the first parameters of our two actions is et_mailchimp –this is the hidden field value that we have in our form. By using these, WordPress understands that it needs to handle the specific form request. So if you used different naming for your hidden action field, make sure your actions are added correctly, like this:


You’ll notice the first thing we did was to make sure the nonce field is valid and verified; only after that we will subscribe the user to the list. This is for security reasons., and you can read more about nonce in the WordPress codex.

After the nonce verification we can subscribe the user with a new function that we will build now: mailchimp_post(). It requires several parameters:

  • User email
  • Subscriber status
  • Targeted list
  • API key
  • And user data, i.e. first name and last name.

Just before the mailchimp_action() function add the following code:

It’s very similar to the mailchimp_connect() function we wrote earlier, except it has a different request type, different url.

This function takes our user data and using the Mailchimp REST API it adds the user to the targeted list using the curl function.

Add Some Simple Styles

Now our widget is complete! We just need to add some subtle style changes. So open the style file we created earlier and paste the following style rules:

Now, clear the browser cache and visit your site’s front-end to check everything is working perfectly. The subscription should work on live sties and locally running sites!


I hope you enjoyed this tutorial on creating a Mailchimp subscribe form widget for WordPress, using the Mailchimp API. It was quite a substantial one! Here is the link to the GitHub repo; you can download the plugin, modify it, and use it in any project you like!

Oo-oo-ooh! More Mailchimp Goodness

  • MailChimp
    Mastering MailChimp: Best Templates and Email Tips for MailChimp Newsletters
    Brittany Jezouit
  • MailChimp
    Best MailChimp Templates to Level Up Your Business Email Newsletter 2019
    Brad Smith
  • MailChimp
    20 MailChimp Templates for Every Purpose and Occasion
    Paula Borowska

10 Best Free Insta Story Apps That Will Help You Slay the Instagram Game
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.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...