The People Involved in Developing a WordPress Website
Developing a website, especially large website, often requires a team. However, WordPress now has many themes, plugins, and features that have helped to reduce the work required to the point that a single person can develop high quality websites, making it possible to run a WordPress development business by yourself.
This is a look at the people, tasks, and skills involved in developing a website with WordPress. If you’re doing this alone these are some of the hats you’ll wear or some of the people you’ll hire. Every project won’t need all of these people and tasks, but they are typical in one form or another.
Someone needs to be in charge of keeping the project on task. Without a project manager it’s likely the scope of the project will grow (scope creep), due dates will be missed, and budgets will be broken. This person should be able to determine what can be done when and for how much.
Many clients don’t have a realistic idea of what’s possible at what cost. They may think that a website with 1000 items in a store can be developed from scratch by tomorrow for $100. The PM will help set the clients expectations and keep the project on track (both on time and within budget).
There are too many websites out there trying to get everyone’s attention. We can’t just set up a site and expect people to find it. Even if you’re not involved with marketing the website, those who are need to be involved with the web design from the beginning. They will perform tasks such as:
Set goals for the site. This will determine what the site needs to accomplish.
Identify the target market. This will determine who the site is designed for.
This will determine the keywords used for the site’s SEO, ads, partnerships, etc.
This person will determine the pages that the site will need and the navigation structure. They will create a sitemap diagram that will be used to create a wireframe diagram for each of the pages to show the navigation structure. They will test this navigation structure and streamline it according to usability.
The Visual Designer will take the sitemap and wireframes and design the look of the site, with the company’s branding, into the wireframes – modifying the layout as needed. The use best-practices for layout, color, fonts, buttons, animation, etc., to determine the best user experience with the content. It will look great while remaining practical and loading fast. Photoshop is a popular tool for visual design.
The web developer creates the design in WordPress. In many instances this is the same person as the visual designer and many visual designers work with WordPress rather than other design tools (although a lot do use Photoshop to create their wireframe). Many use tools such as Divi, Beaver Builder, or Elementor to create the design.
Once the design is created in WordPress they add the HTML, PHP, and CSS that’s needed to make the site unique. They will use API’s to connect WordPress to other services, integrate with various platforms such as forums and learning platforms, etc. Sometimes they focus on front-end or back-end development.
Also known as content developer, content provider, copywriter, or simply writer, content creators provide what is known as copy. This isn’t the same as print copy. This is copy that is designed specifically for the unique nuances of the web. (this is my profession btw)
This is usually two different tasks or roles:
Content Strategist – also known as a blog manager, they identify the types of text required including articles (which will include text, images, illustrations, etc.), text for buttons, menus, product descriptions, etc. This requires knowledge of SEO, content design (including word choices, sentience and paragraph style, headlines, lists, descriptions, etc.), character limits, word counts, etc.
Copy Writer – they write the text itself. They will use good structure which places the major points first followed by supporting text, laying out the content in a design that’s easily scanable, using action words rather than passive words, making the best use of the word count, and driving the readers toward the call to action.
Media Specialist – they create media such as podcasts and video. These are usually tutorials, interviews, training, etc.
eCommerce Specialist – they create product pages including descriptions, images, video, demonstrations, etc. Online stores can have as few as a single product to many thousands of products. This person may be required to manage the store.
Many soloprelancer’s (solo-entrepreneur-freelancer. I don’t know if that’s a real word, but it is now) have done these tasks for so long that they don’t even think of them as separate jobs. Unless you’re an expert in all of these fields and have the time to invest, don’t try to go at it alone. It’s better to get help in your weaker areas and focus on what you do best. Use tools that we have at our disposal.
WordPress is not hard to learn, it’s in high demand, and the business possibilities are endless. Become familiar with a few good tools, such as an all-purpose theme like Divi and learning CSS, and use them instead of trying to build from the ground up. Fortunately there are many plugins and themes that do much of the work for you.
Whether you focus on just one thing and become part of a team, or become good at several things and start your own solo business, the skills covered here are crucial to a successful WordPress website.
Do you perform multiple roles or do you prefer to focus on one thing?
Are there any roles you would add?
Which role is your favorite?
Thanks for reading and commenting. Please subscribe if you haven’t already.
How to Create a Review Site Using Extra from Elegant Themes
When most people consider buying something they usually search for reviews online. For many products there simply aren’t enough reviews, or not detailed enough reviews, to help readers make an informed decision. This opens an opportunity to create your very own product review website. Fortunately, Elegant Themes’ Extra is the perfect theme to create a product review site.
Product reviews are a great way to bring in traffic and help establish your credibility. They even let you talk about things you like and bring in some extra cash through affiliate programs. In this article we’ll discuss how to build a review site using Extra, how to develop your own review structure, and look at some examples. I’ve also included some tips that I’ve learned from my many years of reviewing products (I even use Extra for my review site).
In this article I’ll provide mock reviews of laptops. Images are taken from Unsplash.com.
Extra’s Homepage Builder
Extra has a built in review system allowing you to develop your own review structure, give each item within the structure a score, and Extra calculates a total score automatically. Extra can be used as an online magazine or a blog.
The homepage needs to be designed so that categories are easy to find. Extra has a great system for building homepages designed around categories, which in turn highlight your product reviews. Products can be placed within their categories in tabbed boxes, sliders, or individual posts. Extra excels at product categories because of the layouts and modules within the Category Builder.
The Category Builder uses the Divi Builder and is unique to Extra (in the dashboard, go to Extra and select Category Builder). This is the Divi Builder with a special library of layouts and modules. It has several layouts that are great for getting started with a homepage including blogs and magazines.
The Category Builder has several modules that highlight your posts. Modules include:
Featured Posts Slider
Blog Feed Masonry
Blog Feed Standard
These can be used to create category layouts with sections that focus on specific products. Once you’ve created your layout select to use the layout as the homepage under Layout Usage on the right of the screen.
Developing Your Review Structure
A review needs to be structured so that it tells the information in a scanable way that’s easy to follow and makes sense for the product. Typically, the sections of the review are the major features of the product. It’s a good idea to browse through your favorite review sites and structure your reviews similarly.
The review itself needs to be easy to follow. It will discuss the major points of the product, a few minor points, performance, provide comparisons and example uses, and then have a conclusion with recommendation. Also provide a link where they can make a purchase as your call to action.
The review should be easy to follow and scan, helping readers to quickly find the information they’re looking for. This is done by giving each major point its own section heading. H2 is a good choice to divide the sections. For example, if a reader looking at a laptop review is more interested in the gaming performance of a graphics chipset than the battery life, they should be able to find it just by scanning the page.
Of course there’s more than one way to structure a product review. I recommend experimenting with structures that you like and see what works the best for you and your audience. Divi Leads is a great tool for testing article structure elements. I recommend creating several templates that you can save to the library.
For the typical product, media such as images, and possibly videos, can be an essential part of the review. Usually, an image for each major feature is all that’s needed. You might not want to cover every feature because your content could end up being filled with information and images that your audience doesn’t need. Save images with the name of the product. This helps with SEO and for image searches.
It’s a balancing game to find the exact amount of images to include. On one hand you want to include enough images to give your readers the information they need to make a decision. On the other hand you want your content to look clean and neat, and to load fast as possible. Fewer images that look amazing are better than a lot of images that look bad.
If you need a lot of images then consider using a gallery. This would allow you to display a single image for each section of the review, keeping the overall look uncluttered, and your readers could see more images if they want.
Using Extra’s Review System
Extra has a review system built in that allows you to define your own review elements and give each review item a score. From this score it calculates a final score for you. The scoring system shows a graph that appears below the article’s content and places the overall score on the post in the homepage.
To create the scoring structure, look at the major features of the product and then add the features that matter the most to your audience. Also consider including those that you get a lot of questions about.
Going back to our example of reviewing laptops, you might want to score items such as:
Once you’ve determined your review structure type the items into their own Breakdown boxes. Click Add Breakdown to add a new review element. You can add as many items as you want and delete them if you decide you don’t need them. Create as many elements you need but keep is as simple as you can.
Each of the review items in this example have been given an individual score and they combine to create an overall score. Each of these elements should have information within the review itself. For example, I’ve given Keyboard Responsiveness an 84%. The review should talk about the keyboard responsiveness, explaining what I liked and didn’t like about it. You might also consider explaining your rating system on an About page.
Extra’s Sidebar Widget
Extra comes with a review widget to show your latest reviews. It shows the title of the articles and a bar chart with the final score of the review. The post titles are clickable links. You can choose the number of reviews to show.
Review – a Child Theme for Extra
To see an excellent example of review site using Extra, let’s look at a child theme from Michelle Nunan called Review.
This is a child theme that’s made specifically to be a review magazine. The homepage layout includes:
Hero image banner with animation
Menu that stays on screen after scroll
Top picks slider
Footer with social follow, recent reviews, reviewers, affiliate disclaimer
The sidebar includes:
The review structure steps the reader through the product and its features in a real-world environment. It’s visually appealing, switching between text and imagery while remaining relevant.
Bible Buying Guide – My Own Review Site Made with Extra
I’ve ran Bible Buying Guide since 2011. It started with Elegant Theme’s Delicate News and I changed it to Extra a few months after it released. It’s gone through a few layout changes since moving to Extra. The current form displays a post slider with a single post followed by the most recent posts in a two-column blog layout and a sidebar. It uses the rating’s system so readers can rate my articles and the trending bar so readers can know what the most popular articles are.
Tips for Writing Reviews
It’s a good idea to analyze reviews and see what works and what doesn’t. Utilize the good practices in your own reviews and avoid the bad practices. Look at what engages the audience compared to what turns them off.
For example, how many times have you seen reviews like this?
I bought it for my grandson and he loves it
Not as advertised
Exactly as advertised
I’ve seen these very same comments on the exact same product. This is conflicting information and doesn’t really give the potential buyer the information they need about the product.
I’m sure your grandson told you he loves it. The question is why does he love it? Does he love it because you gave it to him? What about it makes me think I will love it?
‘Too heavy’ is subjective. What is it too heavy for? Holding in one hand for three hours? Carrying in a backpack? Sitting on your lap? Be specific and give the weight. Your readers can decide if it’s too heavy for them or not. If you think it’s too heavy for you, tell why it’s too heavy. Your readers can relate to you and this will help them to know if the weight works for them.
The same goes for the size. Rather than saying it’s too small, tell the size and the let the reader decide for themselves of it’s too small or not. The shipping doesn’t tell me anything about the product itself. The fact that a product didn’t work may not be a reflection on the product itself.
Be completely honest about the product. If there’s something you don’t like then tell that you don’t like it, but also be specific and tell why you don’t like it. You owe it to your audience to tell both the good and the bad. If they buy a product and you haven’t told them about a glaring negative then they will feel cheated and you will lose trust – and trust takes time to build.
For extensive products don’t try to cover everything. It doesn’t have to thoroughly cover every single minor feature. For example, in a product such as Photoshop your readers just want the basics that set it apart from the others.
A review has to answer the question of why or why not. Why should I buy this? What are the benefits if I do? What am I missing out on if I don’t? Is there a better choice? Will this product suit my needs? If you get a lot of questions about a certain feature or aspect of a product then include that information in your reviews.
Be consistent and realistic in your ratings. Determine what is worthy of a specific rating and rate accordingly. If everything is 5/5-star then the rating loses its value.
Supplement your reviews with information that your audience will care about. This brings them back and ensures that you’ll always have content that they need. This can be anything from tips to using their products, to accessories, to gift ideas. Other articles could include Top 10, Best of, etc., and could cover multiple products within the same article. They could even link back to the original reviews. Review related products. Laptops and lawn mowers are not a good match, but laptops and tablets are.
Establish your credibility as a reviewer by being completely honest. Know the products well. Don’t review products you’ve not seen in person or used yourself. Use your experience with the product to develop authority. Develop your own style and opinions. Readers will know they can trust your opinions and you’ll be able to answer their questions.
Don’t recommend products just for their affiliate links. Your audience will realize your bias and you’ll lose credibility. Don’t give a shining review just because you got the product for free. Readers will catch on to this and will question your motives. This will reduce your credibility and authority in your industry.
Show pros and cons – not just pros. This way you won’t come across as a pushy salesman. Be realistic in how the product works and the problems it solves. Don’t fall into the “as seen on TV” line of sales tactics where no one in the world can possibly crack open an egg without getting it all over their kitchen until they use this product.
Tell who you think the product is best suited for and why you think they would benefit from it the most. If possible show examples of the product being used.
Find a niche with products you love and an audience interested in those products. Don’t try to niche it down too much. If your goal is to make money then make sure there are plenty of affiliate programs. It’s difficult to write about products you don’t care for and it’s discouraging to write about products that you love but there isn’t a large enough audience to keep the site going. Use tools such Google’s Keyword Planner to find niches and products that potential readers are searching for.
Write clearly and concisely but don’t worry about perfection. Aim high. Develop and write for a large audience.
Making Money with Reviews
It’s possible to make money from your review site, but don’t expect to make fast money. If that’s your goal then I wouldn’t advise starting a review website as it can take months, or even years, to bring in enough traffic to make money.
There are several ways to make money from your review site. Here’s a look at the most popular methods.
Affiliate Programs – When someone buys through your link you get a portion of the sale. Many online retailers have affiliate programs. This is one of the most popular ways to make money online. Many retailers pay around 5% while other programs pay up to 50%.
Ads – Ads are another popular way to bring in revenue. Make sure ads are relevant to your audience and topic. The typical ad pays by the click or by the number of views, so to make good money from ads you’ll need lots of traffic.
Sponsored Posts – Companies will pay you to write about their products or services. Just like any review you must be honest in showing both the pros and the cons or your readers will not trust your opinions.
Selling Products – Add a store to your website. If you do you’ll have to be extra careful to be as thorough as possible in your reviews or your readers will assume you’re just trying to make a sale. I don’t recommend selling review copies that you’ve gotten for free.
The Federal Trade Commission has specific requirements for bloggers when discussing products. Be sure to disclose if you’ve gotten a free review copy, have affiliate links, etc., in order to comply with Federal regulations. The laws do change from time to time, so be sure to check ever so often to ensure you’re following the rules.
Reviewing products is a great way to establish your authority in an industry and increase your income. Developing a review site is not that difficult when using themes such as Extra. Extra includes a review system with title, summary, total score, bar charts, and total scores on posts and in the sidebar. Extra makes it easy to develop your review system and the Category Builder is great for developing a homepage that includes your reviews or is built around your reviews.
Creating Interesting Footers for Your WordPress Website
Footer are often ignored when it comes to website design. Often, they’re just left as the default footer of the theme. Sometimes they get some sprucing up as an afterthought. Most visitors never scroll down that far, so any hard work you put into it will probably go unseen. However, the readers who do scroll down that far are looking for something specific. They’re usually looking for links or other information. Great web design includes the footer and it can be used in interesting ways. Let’s look at creating interesting footers for your WordPress website.
What to Include in Your Footer
The key to good footer design is determining its purpose. This means deciding what you want to readers to do once they reach the footer. Do you want them to read more about your website, yourself, or your services? Do you want them to contact you, or follow you? Do you want them to sign up for something? Footers are actually a great place to keep some important information:
Sign up forms
Social follow buttons
Examples of Great Footer Design
Don’t try to place everything in the footer though. Keep it clean and simple, only including the most important elements. Choose the few things that matter the most. A good footer design would also be visually appealing.
Here’s a look at Elegant Themes. They have a large footer area with recent posts, categories, and social follow buttons followed by an animated call to action (CTA), security and business certificates, social follow buttons with stats, a menu with different links than the primary menu, and a copyright notice. The footer items are centered.
EvangelicalBible.com shows the logo, contact info, small newsletter signup form, social buttons, copyright notice, store hours, and a back-to-top button.
This one is from CNet.com. It uses a full screen image with a CTA, copyright notice, menu, and links to top brands.
Avada’s Shop demo provides contact info, social buttons, top rated products with star ratings, latest posts, tags, copyright notice, and payment info.
Creating a Great Footer with Divi
Divi has built-in footer editing features. The Theme Customizer includes features for layout, widgets, footer elements, footer menu, and bottom bar. Choose from 10 layouts, customize the widget area, show social icons, create your own copyright notice, style the footer menu, style the footer credits, and disable or create your own footer credits.
Using a Plugin to Design your Footer
There are several plugins to help you create footers. Here are a few popular free and premium plugins:
The header is often the first thing your visitors see when they land on your website. This means your header is your website’s first impression for your readers. You know what they say about first impressions. This is your first chance to wow your reader, capture their attention, and keep them on your website.
This design element can tell your readers about your website. It can say “I’m serious”, “I’m light-hearted”, “I’m intelligent”, “I’m trustworthy”, etc., just from the use of color or images. Needless to say, this is an important aspect for your website.
The typical header contains elements such as:
Color for mood
Call to Action
Your header needs to be responsive, clean, informative, and useful. It shouldn’t be slow loading, eye-piercing, or confusing. Many WordPress users keep the standard header for their theme without customizing it. They work, but they don’t stand out from the crowd. Better header design requires a little bit of customization. Most customizations can be done with the theme’s built-in features, by adding your own code, or by using a simple plugin.
Let’s look at a few good headers.
Examples of Good Header Design
This is Divi Cafe (a Divi demo). The colors work perfectly for a cafe. I especially like the dark overlay with the background showing through the text. Navigation is easy to see and understand. I can tell at a glance that I can make a purchase because of the shopping cart. The image of the cafe can be seen through the overlay and it’s just visible enough to tell me what the website’s about. The logo appears above the menu on scroll. Both the menu and logo change to a lighter, but still elegant, color.
Of course this is only one of the types of headers that you can make with Divi. Choices include vertical or horizontal navigation, full screen and slide-in navigation, unlimited colors, transparent headers, left aligned or centered logo, hide navigation before scrolling, add video, adjust the header height, change the fonts, and lots more.
Another option is to use a plugin such as Awesome Header. It’s a plugin that replaces the standard WordPress header. You can add images, adjust colors, fonts, create sticky navigation, and lots more.
Where to Get Ideas for Great Headers
My two favorite places to get ideas for headers is searching on Pinterest and looking through theme examples. The theme examples can be any kind of website theme including WordPress, Wix, etc. I like looking through themes with pre-made layouts on ThemeForest, child themes for platforms such as Divi, etc.
The example above is a Pinterest search using the keywords website headers. I like to pin my favorites and come back to them for ideas.
This is a look at some of the pre-made layouts for BeTheme. When something catches my eye, I’ll click on it and start making notes.
What’s you favorite method for designing headers?
Do you use the features in your favorite themes, use a plugin, or use code?
Where do you get your ideas for header designs?
Let us know what you think in the comments. Thanks for reading. Please subscribe if you haven’t already.
Web Design Trends 2017 – Stronger Focus on Mobile First
The day of websites not formatting correctly on mobile devices is over. The majority of reader’s access websites on mobile devices. If today’s layouts don’t work perfectly on mobile the website will lose traffic and readership. For this reason many designers are designing websites for mobile first. In other words, a website would be designed for mobile screens before being designed for desktop screens. This keeps mobile in the forefront rather than being tacked on last or forgotten completely.
The design methods of the olden days of web design (last year) was to design a layout or a theme and test it in a few browsers. Once the designer was satisfied that it worked on the popular browsers the website would go live. The problem is the designer didn’t always test it on mobile, so it wouldn’t always get optimized for small screens. Many sites weren’t even responsive until a year or so ago.
Whether you design on mobile and scale to desktop, or design on desktop and scale to mobile, the website must work perfectly on both. My advice is to use a theme that’s mobile-ready and test on as many devices as you can. Divi is a great chioce. As Zurb demonstrates, creating a site for mobile and scaling up to desktop is better than creating for desktop and scaling down to mobile.
My preferred tool is Google Chrome Tools. If you’re using Chrome, right click anywhere on a website and select Inspect. This will open the tools. The will open a tool box either on the right or on the bottom portion of the screen. Select Toggle Device Toolbar if it’s not already showing in the left portion or at the top.
The webpage you’re viewing will show in a simulated mobile device. Choose a device to test in both portrait and landscape mode. Be sure to test as many devices as you can.
Once you’re satisfied with how your website looks in the simulated mobile devices, load the website on as many actual devices as you can.
Another tool I like is Am I Responsive. Enter your URL and it will show your website on multiple screen sizes and you can scroll through them.
Do you build for mobile first?
Do you prefer to scale up to desktop or scale down to mobile?
What are your favorite tools for developing and testing for mobile?
Let us know what you think in the comments. Thanks for reading and please subscribe if you haven’t already.
Micro-interactions are small animations and effects to indicate when an event is happening. They’re great for showing that something is clickable and for indicating that the user’s actions were recognized. I personally hate it when I hover over something and it doesn’t show me that I can click on it and then when I do it doesn’t show me that it took the click. Micro-interactions greatly improve the usability of a website and they’re becoming even more popular.
An example in the real world include the tiny vibration you feel when you click on a button on your smart-phone. You know that it took your click because of that vibration. You’ll also see an animation on the button itself such as the button changing color or becoming larger and then shrinking back to normal.
An example in the virtual world would be hovering your mouse over a menu item on a website you’ll see an effect that indicates the post is clickable. A good example is the menu of Web Design Depot.
These micro-interactions are useful for:
call to action
messages as the result of an action
toggling something on or off
Hover Effects Builder – WordPress Plugin
You can tell from the image above what is being clicked by its hover animation.
Most of these micro-interactions are in the form of CSS animation and can be created with CSS tools or with plugins. Here are a few resources to help you create them: