When designing websites in your favorite design tool like XD, Sketch or Figma, how do you choose the right artboard and container widths for different screen sizes? How to make the most optimum use of your time and create only that set of screen variations that would take care of most desktop, tablet and mobile screen sizes?

At Fantastech, we work primarily on design to HTML and WordPress conversion projects, so we get designs from our clients at all sorts of artboard and container sizes for different devices.

The most popular artboard width choice among them is 1920px for desktop designs, 768px for tablets and 375px for mobiles. Some even go to the extent to create more variations at 1024px, 1366px, 1440px etc to cover more screen sizes. With container widths, it’s all over the place, some prefer to do it 1170px, some 1200px, some do it at 1440px.

But are these the right sizes to choose? And how many variations should you create anyways? Let’s have a look…

Let’s First Define Artboards and Containers

When you’re designing website UIs using one of the UI/UX design tools like Adobe XD, Fimga, Sketch etc, you have to start with a blank white canvas or artboard where you do your designs. It’s called an Artboard in Adobe XD, Sketch & Photoshop and Frame in Figma. So when starting to design, that’s the first thing you need to create.

Now within that artboard, there’s a middle content part in websites that come within a fixed container. For most sites the different sections on a page may touch edges of the artboards like in case of full width background and sliders, but content usually stays with a particular container. That’s what we call as a Container.

To illustrate this, have a look at the our website’s homepage design below:

Here’ you’ll notice that the container is of lesser width compared to the artboard and we have some space on both sides of the container.

If you open our homepage on a desktop screen and zoom in and out, or open it on different desktop screens, you’ll notice that the container always remains the same width but the blank space around it changes with the different screen sizes.

So for designing websites, if we keep can find that ideal container width that would work across all popular screen sizes with still some space left on either sides of the screen, we’d have found that perfect container width that would be compatible with most desktop screen sizes across the globe.

Let’s look at what that container width should be and then we’ll look into what artboard size you should use.

Artboard and Container Widths for Large Screens (Desktops and Laptops)

To find our the most optimum artboard and container widths, we need to first know the screen resolutions that are most popular across the globe. According to StatCounter.com, here’s what we know about the desktop screen market (as of March, 2021):

Let’s Start With Finding The Optimum Container Width for Large Screens

From the table above, we can see that all the popular screen sizes in the market are at 1280px width or above that. That means if we can keep our content container size below that, we’ll be able to cover all major desktop and laptop screens in the market available right now globally.

That gives us an ideal container width of around 1200px width. At 1200px width, even on the lowest screen size of 1280px we still have white space of 40px left on both sides, so that works really well for desktops and laptops and that’s we also recommend to our clients. You can either use 1200px or anything below that and that should fine across all large screens.

And you don’t need to take my word for it. Have a look at what the following popular brands are using:

• Microsoft suggests 1008px and higher as desktop container width.
• Twitter’s Bootstrap, which is the most popular CSS framework in the market, has been using default container size of 1170px till version 4.
• Foundation CSS framework, which is the 2nd most popular CSS framework, uses 1200px as it’s default max container width for rows.
• Semantic UI framework, which is again a very popular CSS framework, uses 1127px as it’s default max container width for rows.
• Popular page builders like Beaver Builder uses 1100px, Elementor uses 1140px and Divi builder uses 1180px as their default container widths.
• Talking about popular WordPress themes, Divi theme uses 1080px, Astra, OceanWP and Avada use 1200px and Genesis uses 1040px as their default container widths.
• Kinsta and WPEngine, providers of premium WordPress hosting services, use a max container width of 1200px.
• Even WordPress’s official website uses container width of 960px!

From all these examples you can see that all of them use container widths of either 1200px or lower for desktops and laptop screens. So with that said, you can easily conclude that going with the 1200px container width would be the right choice for your next website design project that would work well on all major screens in the market.

Most Optimum Artboard Width for Large Screens

With container width out of the way, choosing the artboard width becomes very easy. You can keep the artboard size pretty much anything that you want as long as it’s wider than the container width and you have some space left on either sides of the container.

You can use any width among the popular screen resolutions: 1280px, 1366px, 1440px, 1536px, 1600px or 1920px. At our agency, we recommend our clients to use artboard width of 1440px. But it does not really matter what you use, as long as your container fits in well within the artboard with some space left on both sides.

Artboard and Container Widths for Smaller Screens: Tablets & Mobiles

For tablets and mobile devices, it is easier to choose artboard and container widths as you have only a limited number of popular screen sizes globally. In most cases the artboard width you’ll be using would be same as the width of the device that your users usually use.

Regarding container width, sites on tablets and mobiles are usually designed to stretch and touch both ends of the screen. So if we keep a padding of 15px or 20px on either sides within the artboard, you will have your container ready!

Let’s look at what artboard size you should keep for tablet design. Here are the most popular tablet screen resolutions globally (as of March, 2021) according to StatsCounter.com:

From these stats it’s pretty clear that 768px width screens are the most popular ones. So you can keep the artboard width for your tablet designs at 768px and you’ll be good to go. So for tablets, we recommend you to keep 768px as artboard width and for container width, just add some padding of 20px on each side to make it 728px.

For mobile phones, here are the most popular mobile screen resolutions globally (as of March, 2021) according to StatsCounter:

Looking at these stats, we notice that there are only 3 screen widths that are most popular: 360px, 375px and 414px. There’s no big difference among these sizes and no matter which size you choose among these the designs would look almost identical in each of them.

We would recommend you to use 360px as artboard size for your mobile designs because that’s the most popular width compared to others. But even if you choose any of the other two widths, that should still be ok.

Regarding container size, like tablet screens you can keep padding on both sides at around 20px to make the container width 320px and that should work well for most mobile devices.

Conclusion

I tried to keep this article short and to the point. By looking at the most popular screen sizes for desktop, tablets and mobile devices globally, we can figure out the artboard and container widths to use for designing website UIs.

I recommend designing only 3 variations, one each for desktop, tablet and mobile screens at the following artboard and container widths:

Designing only 3 variations and at these widths would be the most efficient use of your time and would cover every major screen size present in the market.

I hope you found this article useful. What do you think? Do you agree or disagree to these widths? If you have any comments or suggestions, feel free to leave a comment in the comment box below.

The post Quick Guide on Choosing Artboard and Container Widths for Responsive Website Design appeared first on Fantastech.co!.

Now when it comes to the conversion of those designs (that are in Adobe XD, Sketch, Figma or other design formats) to WordPress website code, you usually have two options:

1. Either hire an in-house development team that’ll help you with coding these websites (which is costly and hard to manage),
2. Or outsource it to some external development agency to free-up your time, cut costs and save yourself from all the HR and management headaches.

If you’re sold on the idea of outsourcing, I will help you make your next outsourced design conversion project super successful with the tips given in this article.

These tips come from my experience running a WordPress agency that specializes in design to WordPress conversion projects and from the projects we do for our clients every single day.

Let’s start with a contradictory tip:

1. Do Not Outsource If You Can DIY (Do-It-Yourself)

Let’s start with the first rule: Never outsource a project that you can build yourself.

With the availability of website building tools like WordPress and its page builders, building websites with no coding knowledge is easier than ever before. 

If your next project is a simple business/marketing website with a bunch of simple pages, don’t waste your money on hiring a web developer.

Instead, teach yourself one of the popular themes and page builders and use that combination to build your next website. 

Now there’s a little learning curve here if you have never actually built a site yourself, but it’s definitely going to help you in the long run.

You can get started with the following tools that we use internally for our client websites:

1. Astra Theme – this is a flexible and multipurpose base theme that you can use to build pretty much any kind of website.
2. Astra Pro Plugin – this is an extension plugin for the free Astra theme and makes the theme even more flexible.
3. Beaver Builder Plugin – this is the page builder of our choice, mainly because it’s super easy for the clients to use, highly flexible and extensible code-wise. It easy to learn and you’ll be able to start using it in no time.
4. Ultimate Addons for Beaver Builder Plugin – this one is an extension to the Beaver Builder plugin that adds 40 extra modules to it. Beaver Builder and this addon plugin combined have a sufficient number of modules that you use to make pretty much anything.
5. Gravity Forms Plugin – this is the last form builder plugin you’ll ever need for making any kind of forms.

Most the these are paid, but the combined cost of these will be lesser than what you’d spend on hiring a web developer.

Actionable Tip: If you have an upcoming website project that’s simple and the client is not very demanding, I suggest you try to build the site on your own using Astra and Beaver Builder. Checkout our design to WordPress conversion tutorial and spend a few hours learning these tools to implement on your project. If you can pull it off well, you’ll be able to save thousands of dollars by not needing to outsource development.

2. Don’t DIY If You Can Outsource

So this one is completely opposite of what I just discussed above. Never ever try to build a site yourself unless you’re 100% sure what you’re doing.

Let me explain this with a story. 

I had a client recently who came with his educational site for kids. He wanted us to add a little functionality to his website. The site had multiple pages on Maths, Science, English, Learn to Color, Games and so on and there were around 50+ such pages.

Every page had identical structure and each one had a grid of 6 to 9 educational videos that opened up in a popup.

The site looked great from outside until I saw what was on the backend.

I was amazed to see that he had manually created each and every page on the site using a page builder and created around 200 individual popups manually using a popup maker plugin. 

That’s like having an eCommerce site with 1,000 products and creating 1,000 individual pages manually for every single product statically.

If you know how to code even a little bit, you’ll understand what this means. 

He made everything so static that to make a little change globally to the pages or the popups he’ll have to go and edit each and every one of them manually.

Imagine if the site grows to have 500 or maybe 1,000 such videos. It will be a nightmare to manage the site.

If we (or any other experienced developer for that matter) would have made their site from scratch, we would have made a single template file for the pages and a single template for the popup and kept all the data in the database that can be then fetched and rendered via the templates.

What’s interesting is, this was not the end of his issue. He asked me if I knew a mobile app developer who can convert the site into a mobile app.

Now, we do not do mobile apps so I suggested he look for someone else but warned him that it would cost him at least 5X of what it would normally cost to get the app done. 

This was because there was nothing on the site that could be dynamically pulled using API and rendered on a mobile screen.

And that’s exactly what happened. The app company he went to came up with a price that was over the moon for him and told him exactly what I warned him of.

You see, like this client, I meet a lot of designers who make this exact same mistake. They learn a page builder and basic theme customization and try to build everything with that limited knowledge.

This makes the project complicated and almost impossible to manage and fix at a later stage and the only option that remains is to redo the site from scratch.

I’m not telling you this to discourage you from doing it yourself, but just warning you so that you do not lose your valuable time and money doing something you’re not 100% sure about.

So next time you have a website project think twice before building it yourself and see if you might be better off getting help.

Actionable Tip: Before starting to build the website yourself research if you can build the complete website using available themes & plugins or not. For example, you can build a full-fledged eCommerce site by simply installing Woocommerce on WordPress. But let’s say you want to put the wishlist button on the right of the product image instead of left, probably you won’t be able to do that without knowing how to code. So unless you’re 100% sure that you’ll achieve the results with your skillset and the available themes and plugins, don’t do it yourself.

3. Design For Web and Not For Print

This advice is specially for noob website designers. I usually see this being done by web designers who’re just starting out with designing UIs for the web and by designers who’re switching from traditional print designing.

Here’s the thing: you don’t design websites the same way you design a brochure, pamphlet, magazine or any other print design. There are certain standards you need to follow when designing websites and they are very different in a lot of ways from how you’d traditionally design for print.

For example, when you design a website… 

• you design it for specific user experience and to achieve a particular goal (like user consuming content, getting their information or having them buying a product or service), 
• you usually design in a grid pattern so that it looks good for most screens,
• you always use web-friendly fonts which are small in size so that the page load speed is fast,
• you keep different browsers and screen sizes in mind when designing for maintain responsiveness of site,
• the images and colors you use must be selected in a way that allows users to look at them for a prolonged period without straining their eyes,
• and so on…

A full-blown book can be written on this subject as there’s so much to talk about how to design websites properly. To keep this post short, I’m not getting into all of that but sharing two blog posts I found on this subject. 

I highly recommend you read them:

• 17 mistakes graphic designers make when designing for web (10-minute read)
• 4 key principles of web design by Alex Bigman (7-minute read)

These two cover almost all the basics you need to know about designing websites.

Now when you design websites the right way, it makes the development process becomes super fast and super easy for the web developers that in turn helps you reduce costs dramatically.

The more fancy art you put into your designs to make it look beautiful (and not follow the standard web design guidelines), the more difficult it becomes for the developers to convert them to a website.

A lot of times they either end up not being able to build the site exactly like the designs or consume a lot of time that shoots the project cost through the roof.

So if you want your next project to be cost-effective and efficient follow this tip and you’ll be good to go with any developer you hire.

Actionable Tip: Don’t go to the next tip unless to read the articles I’ve shared above. They cover pretty much everything I could have written related to this. These articles will totally change your perspective on designing websites and will give you a lot of insights to make your next project better than the earlier ones and much more cost-effective.

4. Set a Realistic Budget

The main reason you outsource (instead of hiring someone locally) is largely to save costs. But you have to be realistic about what amount you want to pay to your outsourced website development team.

If you charge your clients around $10,000 or more for the full website design and development, you should put around 30% to 50% aside for the Design-to-WordPress conversion part with a buffer of 10% for any unexpected costs.

The exact amount depends upon whom you’re hiring and their expertise, but with this budget, you should be able to hire some of the best talents from countries like India or the Philippines.

One important thing to remember is to not go too low on your budget to increase your profitability and know exactly what to expect from the money you’re willing to pay.

This is something you can’t figure out in one go from the first project itself, but as you work with more and more developers you’ll gradually find out the perfect partner that’ll help you achieve exactly what you want in your budget.

One more important thing, do over-negotiate to bring the developer’s quote down to your budget level. The more you try to bring the price down the more resentful the developer would become and that would bring the morale of the whole team. This impacts the performance of the developer and the quality he/she delivers.

Also stay away from developers who quote some amount and then agrees to work for a lot less than quoted. Usually the best developers and development teams have standard pricing and they don’t compromise on their quote just to win the project. If you find someone who quotes a random amount but agrees at a much lower price you can easily assume that they’re more focused towards meeting their monthly sales targets and less on delivering any true quality work.

Actionable Tip: Make a thumb rule that if the developer is not ready to work in your budget and is quoting more, either increase your budget or just walk away to find someone else who might do it in your budget. Web development is a long term game and unless everything both you and the developer are comfortable from the very beginning you’ll face the consequence down the line from your developers who might not do your project with a full heart.

5. Hire for Competence and Not for Price

This brings me to the next rule which is connected to the previous one. Whenever you hire an outsourced web developer or a development team, hire them for their competence and not the ones with the lowest quote.

As the saying goes: you get what you pay for.

Web development is a very competitive niche with millions of web developers and agencies in the market that are ready to win your project at such low costs that you can’t even imagine.

Just search for “web development company” and you’ll find gazillions of search results of the companies and freelancers who provide the service. The same case is with freelancer marketplace sites like Upwork, where the developers are competing with thousands of other developers to win your job quote with their lowest bids.

Think about it – if a developer is really competent and skilled, would he/she quote least amount possible to win a job?

So be wary about hiring the developers with the lowest cost and hire the ones who would not only provide maximum value for money you pay, but also deliver the exceptional quality code. 

But, how do you find excellent developers and figure out the right price to pay them?

It can be overwhelming to find one among so many of them offering who’re offering the same service. 

But there’s an easy way to do this.

Have a look at the screenshot below from Upwork.com:

I did a quick search there for WordPress Developers to find out the Average Hourly Rate of the Best Developers in India.

I filtered web developers…

1. who’ve earned minimum $10k on Upwork
2. who have a minimum job success rate of 90% on Upwork
3. who have been billed a minimum 1000 hours on Upwork
4. who have claimed that they have Fluent English.

The developers who showed up in the search results can be easily called best web developers on the Upwork platform.

Now, notice the red outlines I’ve made. You’ll see that the hourly rate comes in the range of $10 to $30 per hour for the maximum number of these top developers. 

On inspecting further you’ll find that most of them were actually in the range of $15 to $20 per hour.

So looking at this, you can assume that if you want to hire the top WordPress Developers with the highest ratings, work experience, and a proven track record, $15 to $20 an hour is what you should be ready to pay for. 

At Fantastech, we charge $20/hour to our clients, which sits perfectly in that price range. Now if you compare that cost to the US average of $37.18/hours, that’s almost half of the cost that you will pay to a web developer in the US. 

That means double the profit you can keep with yourself by outsourcing and still work with the best developers of the lot.

Actionable Tip: To make your life easy I am sharing the exact filter I used for the above example. If you use Upwork for finding talent, you’ll find it useful. Click on this link here to open the search page on Upwork with the filters selected. You can then go through the profiles you find and contact a few of them to know their quote and finally outsource your design conversion project to them. But if you want to save time, you can also reach out to us with your designs for a quick, free quote.

6. Prepare Clear & Detailed Instructions Document for your Developer

Know exactly what you want and put that on paper. A lot of times we get web designs from the agencies and they say go-figure. That’s a recipe for disaster. Unless you’re super clear about what you want and document it in a way that the developer can fully understand the functionalities, there’s a great chance the project may go in wrong direction.

Here are some tips that’ll help you prepare clear and detailed instructions document for your next web development project for your developer:

1. Set a goal – Every project has an overall goal, so make sure this is stated upfront. If you need the developer to build a pixel-perfect site that is optimized for speed, make sure you write that specifically in the document. This way the overall goal is clear to everyone before the project starts.
2. Provide as much detail as possible – Give all design-related metadata, links to design files, link to assets, website sitemap in the instructions document. I’ve prepared a simple template document for you that you can use for your next project. Make a copy of the document and edit as your own.
3. Explain everything briefly – Explain each section of each page briefly in terms of what you want. In most cases, you’ll not need to put the explanation in sections that are straightforward like sections with just text and images or section with simple 3-4 columns with icons, heading, and text.
   
   But for the more complex ones, you can explain what you want to achieve from each section and element on the page. For example, if you want a particular type of animation effect when users scroll to a section, or you want the button to change its color on hover or clicking on a particular button to open a popup or take the user to another page and so on.
   
   These may seem like small things, but when the developer is not clear about these things the project can easily go towards a completely unintended direction.
4. Keep It Simple – You don’t want to waffle on things that aren’t relevant to the project. This can lead to confusion in the same way that too little information can. It’s also wise not to communicate too many things at the same time.
5. Make Sure They Understand the Instructions –  Let the developers go through your instructions once and then have a call with them to go through everything in detail so that everyone is on the same page. Always confirm with the developers that they understand what is expected of them and that they have everything they need for the task at hand.

Of course, there’s likely to be a few moments when instructions will be misunderstood. Even when you’re careful with your instructions, you can’t always anticipate a perfect outcome. 

When miscommunications happens, view it as an opportunity to learn and reassess your instruction writing process. Update the document or have a call with the developer to get the thing sorted.

Actionable Tip: Use the template I shared above on your next design project. Make a copy of it and write all the details of the project in the same format as given in the document. Make it as detailed as possible and make sure you include all details about the project. Create a folder on Google Drive or Dropbox or whatever file storage service you use and add links to each file from this document. This will make the whole process very smooth for you and your developer.

7. Test Your Developer Before You Hire (1-Page Competency Test)

As the title suggests don’t hire a developer you’re meeting for the first time right away just by looking at their credentials, past feedback, portfolio and what they say in your first meeting.

You can use what I call as 1-Page Competency Test.

When outsourcing design to WordPress projects, you have a special edge, compared to other kinds of development projects. As all such projects start from designs, you can outsource a part of it (like 1-page) and hire a developer to test their competence before hiring for the full project.

All you do is hire the person you’ve shortlisted for a short paid test where you pay them to convert the first page of your website design (usually the homepage). 

Spending a small fraction of the total project amount on this short test can be really useful to weed out the developers who might not be able to deliver the results you’re looking for. By the time they deliver the first page, you’ll have tasted the full delivery cycle working with them, the quality of code they can deliver and their communication.

When you’re 100% sure that you’ve found the right developer, you can hire them for the rest of the project or else look for another developer. This helps you to avoid making wrong hiring decisions.

I suggest this test to all our prospect clients to help them test us if they want to get a taste of what we can deliver in terms of code quality and overall project experience.

Actionable Tip: In your next web development project outsource the conversion of your first design page and test the developer in terms of quality and communication and see if you’d like to continue working with him/her. I’ve given a detailed quality assurance checklist that you’ll find in Rule #10. You can use that to test the quality of code delivered to you.

8. Be Patient And Don’t Micromanage

After the developer starts working on the project, be patient and don’t micromanage the project.

Don’t expect your developer to report to you every few hours or every day with the progress and don’t bother to give your suggestion on every little thing he/she does.

This is a common cause of conflict on projects. 

From the web developers’ perspective, they think they have been hired for the skills and expertise they bring to the project. They want to feel responsible, valued and empowered. 

Micro-managing them destroys trust and can lead to a lack of confidence and motivation. However hard it feels, letting go of the reins is essential to the well-being of your project.

It can be hard to let go and trust people. However, that trust is almost always repaid. All top web designers and agencies know this and that’s how they treat their developers. 

Even if you know the technical side of things, don’t bother your web developer every now and then to ask how he/she is doing specific parts of the website.

But this does not mean, not to keep in touch with them at all. Before starting the project mutually agree with the developer on when they need to report to you and what you expect them to deliver each time.

Actionable Tip: On your next web development project distribute reporting from the developer over the overall project duration. You can ask your developer to keep you updated on the project once a week every Monday or Friday. Or you can ask them to report twice every week on Wednesdays and Fridays if you’re not very comfortable to wait for one whole week. 

9. Be Available When Your Developer Needs You

This tip is related to the previous one. Opposite of micromanaging is disappearing completely after the project starts.

After the developer starts working, it may happen that he/she may need some information in order to move ahead with the project that got missed in the instructions document.

Now your next meeting with the developer is on Monday but you’re not available to respond to his/her query, the project might just halt till the time you’re back.

This does not just waste everyone’s time but the project delivery to your client is delayed as well.

You might not feel that this is a big issue, but I’m telling with my first-hand experience. We’ve had clients who thought they gave us all the information and went for a vacation with no way to contact them, only to know after coming back that they sent me the wrong files or did not send all the design pages.

Even if you decide to do weekly meetings as suggested above, be present at other times, just in case the developer needs to clarify some doubts.

Actionable Tip: Create a Whatsapp or Skype group or a Slack channel in which all the stakeholders are present along with the developer and project manager. This way you can have open communication with everyone involved in the project and no delay happens because of non-communication. 

10. Do An All-round Quality Check

This is one of the most important tip. You outsource design to WordPress conversion projects to save cost and free up your time, but that should not come at the cost of a poorly done website.

You must make sure that what you’re receiving is top quality code that you can deliver to your client proudly. 

If you’re not a developer, you might not know all the minute technical details of what to check on the delivered website, but to do that effortlessly can use my 10-Point Quality Assurance Checklist that I’ve described below.

This is a short version of the checklist we use internally to make sure the websites we deliver to our clients are perfect and QA passed.

You can use this for your next website project.

Here we go:

1. Basic website check – Check the basic details like text sizes, colors, images, fonts, layout width etc of the site to make sure they’re exactly the same as documented in the instruction manual.
2. Pixel-perfect test – Open the website on the browser and open the design file next to it and check each and every section on the various pages one-by-one to make sure if they look identical. If not report to your developer.
3. Check the links – Click the buttons and links on all the pages to see if they’re going to the intended pages. Check if the developer is using absolute or relative links.
4. Check the forms – Submit the Newsletter, Contact and all the other forms on the site and see if you’re getting an email or not and if the data is getting added to your CRM (if that integration was needed). Email setup is something web developers usually forget about while delivering.
5. Check other functionalities – Check all the functionalities on the website and see if everything is working fine. If it’s an eCommerce site, do a start to end test from opening the site to adding the product to cart to checkout. Check if everything is working smoothly as expected or not.
6. Cross-browser testing – Run the site on all the web browsers and devices that you have and make sure everything is working everywhere. If not report to your developer immediately.
7. Page load speed testing – Notice how fast the website is loading on various connections like your broadband and on your phone’s mobile data. Use tools like Pingdom, GTMetrix and Google PageSpeed Insight tool to make sure you see a good grade and green light on all of them.
8. Security testing – Test if the developer has used a strong password for the website backend. If the developer has used a Content Management System (CMS) to build the website make sure he/she has not used cracked premium theme or plugins as these might contain malware that can infect your website. Ask your developer to do a Malware scan and also install a basic firewall on-site if possible.
9. Themes and Plugins testing – If a CMS is used to build the site, check the number of plugins used by the developer. Most websites do not require a ton of plugins and if you see 20+ plugins, it’s a big red flag. Ask the developer to explain the use of each and remove the ones that are not absolutely required. This will not only help in performance but also unclutter your CMS dashboard.
10. Take a test drive of WordPress backend – Go through all the options in the backend and see if it’s easy to use and if you’re able to make edits and if those are getting reflected on the frontend. Understand how everything works so that you’re able to then train your client with the same.

That’s it. If you are able to get the site with all these taken care you’re good to go and show it to your clients.

Actionable Tip: When you get your website delivered the next time go through this checklist and make sure the developer has delivered on all these points.

Conclusion

So these are my 10 tips on outsourcing design to website conversion projects that’ll help you outsource your projects successfully and get the pixel perfect websites built with minimum hassle.

I hope you found this article valuable. If you want to learn more about how we can help you with your design conversion project, feel free to contact us or send us you design files for a quick, free quote.

The post 10 Tips on Outsourcing Design to WordPress Conversion Projects Successfully appeared first on Fantastech.co!.

It is a cycle that involves multiple iterations, feedback loops, redesigns and redevelopment of features. Even when the product is available for beta release, there will still be changes in the designs followed by changes needed in code of the website or app.

As we’ve been in the development side of things for last many years, offering design to code conversion services to web designers and agencies we know that to ensure effective collaboration between designers and developers, a proper design handoff must take place.

In this article, we will explore overall design handoff and they available tools in the market that allows designers for successful collaboration with the developers.

The Design Handoff Workflow

Design Handoff is a stage during website or app development process where designers send the finished designs to developers for converting it to code. A successful design handoff involves a strong collaboration between designers and developers.

In a nutshell, here’s how the design handoff workflow goes:

• Designers use website and app UI design tools like Adobe XD, Figma, Sketch etc to create a mock up design of a product.

• The mockup designs are then uploaded to a design handoff tool for inspection by the team members, stakeholders and the developers.
  
• Those involved in design decisions, such as stakeholders, check the design and send their comments back to the designers accordingly. This collaboration between stakeholders and designers is made possible by the commenting features usually offered by the design handoff tools.

• Designers fix issues or redesign according to comments.

• The updated version of the mock up design is sent back to the stakeholders for their final approval.

• After approval, the developers come into the picture who inspect the design and its layers using the handoff tool.

• Each element of the design is then converted into code by the developer who take use powerful code inspecting features of these handoff tools. From colors, typography, padding, margin and more, design handoff tools help developers get the exact values of every single element of the pages designed to help them create pixel perfect websites/apps.

With design handoff tools, designers do not have to spend a large amount of time manually writing design specs or creating style guides. Instead, developers can go straight to development using the handoff tools and save a lot of time and resource in the process.

A design handoff tool makes collaboration easier between designers, developers and stakeholders. Below, we list down the best handoff tools available in the market today, their features, pros, cons and more!

Best Handoff Tools Compared

1. Zeplin – the leading design handoff tool in the market.

Zeplin allows designers to easily turn their designs into specs and guidelines while giving developers access to all of these resources in a single location.

Recommended for

• Both small and large projects.
• Teams looking for a technical handoff tool that includes a style guide.

Pros

• It can integrate designs from Sketch, Photoshop, Adobe XD and Figma.
• Users can organize its component overview feature into sections.
• You can organize different screens with tags, a feature fit for larger projects.
• Single screens can be downloaded into PNG files for presentations and other uses.
• It offers effective team collaboration through its commenting feature.
• You can generate an automated style guide and excellent code snippets.
• Its web preview feature can also be used as a pixel overlay.

Cons

• No prototyping.

Pricing

• FREE for one project
• $17 per month for 3 projects
• $26 per month for 12 projects
• $10.75 per month for UNLIMITED projects

2. InVision Inspect

InVision Inspect is a handoff tool made by the cloud-based design platform InVision. This tool is the company’s response to help make the design handoff process easier for the designers & developers.

Recommended for

• Collaboration during the design process (mockups, prototypes, and discussions)
• Technical handoff for smaller projects

Pros

• It has a prototyping feature fit for creating prototypes.
• You can also handoff your designs from Sketch and Photoshop.
• It has a mobile app feature fit for mobile mockups that can even be previewed on the desktop.
• It offers a live chat feature that is very useful for remote teams.
• It also has a grid overlay feature.

Cons

• It does not allow proper screen organization.
• Its overview page can be a bit messy, especially when using the same project for both prototyping and technical specifications.
• It may offer various features, but it is best used for handoffs involving mockups, previews, and discussions than technical handoffs.

Pricing

• FREE with limited features
• PRO – $9.95 per month for up to 15 active users
• ENTERPRISE – per seat pricing

3. Avocode

Avocode is another pure handoff and collaboration tool that helps developers build web and mobile apps exactly like how they were designed. Using this tool both designer and developer can collaborate on designs from Sketch, Adobe XD, Photoshop and more.

In fact, this is the tool of choice that we use at our agency for inspecting designs that we get from our clients.

Recommended for

• Neat and organized teams.
• Development teams who want an all-in-one platform to manage most design formats.

Pros

• It allows users to export needed assets from any layer in various formats, therefore eliminating the need to set up assets.
• Users can create project subfolders.
• Its overview page has a search box, best used when multiple screens are present.
• It has a separate tab feature.
• It has an overview feature for icons.
• Its Sketch plugin allows for direct uploads and downloads to and from the Sketch.
• It has features like commenting and annotating for team collaboration.
• It has an excellent web preview.
• For pixel-precise designs, it offers a pixel-checker.
• Overall, a clean and functional UI design.

Cons

• To ensure its asset export feature works well, both file structure and naming must be neat and tidy.
• It does not offer any free project plans.
• Along with no free project plans, it also only allows limited guest users for projects.
• Sometimes there’s a font loading issue where the app is not able to render fonts correctly.

Pricing

• SOLO – $15 per month
• TEAM – $22 per month per member
• ENTERPRISE – custom pricing

4. Sympli

Sympli is a design handoff tool that helps you inspect your designs and convert those to website and app code. It consists of extensions for Xcode and Android Studio and also plugins for Sketch, Adobe XD, and Photoshop and is truly an all-in-one design handoff tool. On top of that, it introduces the world of git version control to the different version of the designs.

Recommended for

• Remote design and development teams.
• Large teams that need version control for their designs.

Pros

• It has an excellent desktop and mobile interface.
• It has plugins for Android Studio, Xcode and Adobe XD, Figma, Sketch and Photoshop.
• You can integrate it with Jira, Slack, Microsoft Teams and a lot of other apps.
• It has Git support through its Git-based app called Versions.
• Other than the default css, it also offers different css syntaxes such as scss, less, sass, and stylys.
• It can easily show all elements that have the same color or font.
• It has a drag and drop editor.
• Users can use tags in their designs to group them according to status.
• It also has team collaboration features like commenting or annotations.

Cons

• Its real time editing feature is limited.
• Measurements may sometimes mess up if multiple components are overlapping, especially for designs made for Android.
• Exporting Android designs needs more time because it needs to be processed first before syncing.
• It is also sometimes hard for developers to find the css details of design elements.

Pricing

• FREE for one active project only with three maximum collaborators
• STARTUP  – $4.5 per seat per month
• BUSINESS –  $9 per seat per month
• ENTERPRISE – custom pricing

Zeplin vs Invision vs Avocode vs Sympli – Conclusion

To sum up, Zeplin is an all-in-one tool that can be effectively used for design and technical handoff. This is because of its ability to generate excellent style guides and codes while allowing team collaboration through its commenting features.

Meanwhile, InVision Inspect is a tool perfect for mobile prototypes. However, when used mainly for technical handoffs, it’s best used for smaller projects.

Now, moving onto Avocode, the only handoff tool in the list that does not offer a Free plan. This tool is the most organized among the others, offering a clean and functional UI with search features.

Finally, Sympli, the tool that’s again an all-in-one tool that integrates with a ton of design tools. Its Git support is a great perk for all teams who need version control.

We’ve only listed down the top design handoff tools for this year. However, there are actually more tools out there that you can explore, from Abstract to Marvel and staying using UI design tools Adobe XD and Figma and using their native handoff capabilities.

Let us know what you think about these tools. Have you used any of these tools in past? Or do suggest any tool that we did not cover in this article? Do let us know in the comment section below.

The post Best Design Handoff Tools Compared: Zeplin vs Invision vs Avocode vs Sympli appeared first on Fantastech.co!.

There are over 50 apps available in the suite, but there are main apps that truly stand out. From Adobe Photoshop to Illustrator and more! But, let’s look into the growing Adobe software that has been competing effectively with its competitors: Adobe XD.

This article introduces Adobe XD, the tool mainly used for web and mobile prototyping, and its 10 Best Tutorials for Beginners and Advanced Users.

What is Adobe XD?

Previously known as “Project Comet,” Adobe XD or Adobe Experience Design was launched in February 2016. It was then only a preview version that only catered to Mac, and with very limited features presented. But, as more updates were introduced and more features added with feedback from the growing user base, Adobe XD has grown quite a competition to fellow wireframing and prototyping apps like Sketch and Figma.

In fact, earlier Sketch conversion was one of our most popular services but Adobe XD to WordPress conversion projects have surpassed that in recent years and majority of design conversion projects we do today are for Adobe XD designs.

It works for web designers as an excellent vector-based digital design tool using which you can create prototypes, mockups, or full designs while collaborating with other team members.

There are many benefits that Adobe XD offers to the web design community. If you’re an aspiring designer or you simply want to explore this tool, here are the 10 best tutorials for Adobe XD for beginners and advanced users.

Let’s begin.

#1 Quick Start for Adobe XD

What’s a better way to begin than to learn from the creators themselves?

This tutorial by Adobe shows users how to make a prototype in Adobe XD. It consists of three parts that give the users a general idea of the tool’s features. It has an overall six easy steps with added videos for steps 2 to 6. It starts with creating a design, turning it into a prototype, and sharing it with other developers for feedback and testing.

#2 How to make a pop-up overlay in Adobe XD by Artist Erica Larson

Another tutorial straight from Adobe.

The best way to learn is to experience it yourself. This tutorial is the first part of their “Create your prototype” tutorial, consisting of three parts in total. It first shows a 1-minute video of all the steps involved in making a pop-up overlay in the software. Here you’ll learn how to duplicate artboards, hide some elements, include a menu, reveal the previously hidden elements, and see the overall result.

#3 Beginner Project: Make A Responsive Design by Designer Cynthia Fong

This is part of the beginner’s projects offered by Adobe.

Here, Cynthia Fong shares how users can design app layouts fit for different sizes while creating a great user experience. It starts with a 1-minute video of all the steps involved. Users will learn how to enable the Responsive Resize tool and how and where to use it. 

#4 Projects To Get You Started: Create Icons With Basic Shapes

The world of apps and the web are filled with icons. That is why this tutorial shows users how they can create icons with even the most basic shapes with Adobe XD.

Like all tutorials offered by Adobe, this tutorial has an available sample file you can use. Learn how to replicate elements by using Repeat Grid and refine shapes to your liking.

#5 Learning Adobe XD by Tom Green

Now that you have been introduced to some of Adobe XD features, it’s time to deep dive into it.

Tom Green introduces not only the basics of Adobe XD but also the more exciting features such as auto-animate, integration with Photoshop, Sketch and other developer tools. You will also learn more about artboards, interactive prototypes, and how to test them in preview panels.

#6 Adobe Xd Ui/Ux Design, Prototype, And Handoff From Scratch by Caleb Kingston

This tutorial caters to those users who already have the basics covered. So, if you went through the previous tutorials mentioned above, you’re ready for this class by Caleb Kingston, a User Interface teacher at www.appdesigntips.com. 

With over 6,085 students and a rating of 4.5, this tutorial begins with a few basics and proceeds immediately to the more complex works such as designing and prototyping a full-fledged app. It includes the use of images, colors, and exciting animations.

#7 Adobe Xd Animation – Complete Guide From Icons To UI by Aleksandar Cucukovic

The previous tutorial introduced the animation feature of Adobe XD. In this tutorial, Aleksandar guides students on everything they need to know about Adobe XD Animation.

Students will learn how to animate icons, buttons, texts, charts, and other elements. Along the way, it will also show students how to design a mobile app with all the necessary animations.

#8 Design a landing page experience with Adobe XD and Photoshop

This tutorial is part of the XD Tutorial for Photoshop users by Adobe.

The highlight of this tutorial is that it shows users how to edit content from Photoshop within Adobe XD. It includes three steps: (1) Users start creating a wireframe for their landing page, (2) followed by transforming mockup wireframe into a full high-fidelity design, (3) and of course it ends by sharing the prototype to other users for feedback.

#9 Pro-level Android App Design with Adobe XD & Google Material Design by Muhammad Ahsan

Since web design is covered in the previous tutorial, this tutorial will focus on creating an app design with Adobe XD.

Muhammad Ahsan has been a UI/UX Designer for 10+ years, and here he details how to create an android app design according to the guidelines set by Material Design and Adobe XD. It’s an advanced tutorial that teaches students how to design android apps at a professional level.

#10 Adobe XD Masterclass: UI Design by Joseph Adam

The final tutorial in this list is another professional course that teaches students how to use Adobe XD effectively that by the end of it, they can design their own website and app interfaces with complete confidence.

All in all, Adobe XD is no doubt a powerful tool, and with all the available tutorials out there, you will surely learn to find your way around it, integrate it into your design workflow, and produce stunning website designs.

The post 10 Best Adobe XD Tutorials for Beginner and Advanced Users appeared first on Fantastech.co!.

No matter what tool you choose for designing your websites (Sketch, Figma or Adobe XD), you can follow the instructions given in this post to convert your designs to WordPress.

2 Different Methods of Prototype to WordPress Conversion

When it comes to conversion of designs to WordPress, there are just two ways you can do it:

1. Create custom WordPress Theme – You can start from scratch and create a custom WordPress theme. In this you convert your design prototypes to HTML and then convert those into a WordPress theme. You can also start directly by building your custom WordPress theme using something like Underscore.
2. Use a Theme and Page Builder – The second way is, you can build your WordPress site using a powerful base theme like Astra or Divi and a page builder like Beaver Builder or Elementor.

The first method is extremely tedious and you must know how to code in PHP and WordPress in order to convert your designs this way. It’s also more time consuming. But there’s a benefit to this method and that is, you have more control over the quality of code you produce and if you follow the WordPress coding standards you can keep the theme very clean and light weight.

In this post we’re not going to covering that custom theme method and instead we’ll be covering the page builder method.

If you want to learn how to do it using the custom theme, there are pretty of good tutorials present online like this and this. Both of them are very comprehensive and you’ll find them very useful.

Design Prototype to WordPress Conversion Process

Let’s look into the process of how you can convert your design prototypes in Figma, Sketch or Adobe XD into WordPress website. It’s important to understand that we talk about conversion of designs to WordPress, we’re not talking about directly converting them using some magical tool.

We’re instead talking about using the designs as reference for our development and keeping the designs next to WordPress to build the website looking at the design files.

The process is quite simple and can be summed up in 6 simple steps:

1. Pick a powerful, base WordPress theme
2. Pick a page builder plugin
3. Setup global theme settings like layout, typography, colors etc in Customizer/Theme Options
4. Setup global settings in page builder
5. Build the header and footer using theme options or using page builder.
6. Build homepage and then rest of the pages

Let’s look at each of these in more detail below.

1. Pick a Powerful, Base WordPress Theme

The first and most important step is to choose a suitable theme for your project. You’ll find thousands of themes in the market, but we don’t need to go out for a search to find theme that matches our designs.

Instead we’re picking a theme that provides us with a lot of options and settings to build a solid website base, but does not have any design of it’s own. Basically a bare bones framework theme that is is flexible enough to be used with a page builder to build any kind of website.

There are a lot of such page builder compatible themes in the market like:

1. Astra
2. Page Builder Framework
3. Divi
4. Avada
5. Beaver Builder Theme

These are just few of the most popular ones, but you can find lot more on the internet by doing a search search. At our agency we personally use Astra theme as it comes with a lot of great features and is extremely light weight and flexible. The Astra Pro plugin gives even more power to the theme and you can use it to build pretty much any kind of website you want using a complementing page builder (discussed below).

Please note that, you might have a website project going on right now, but this probably won’t be the last website you’ll build. So while picking a theme make sure to pick one that you’re fully comfortable with and which is flexible enough that you can use it across all your future WordPress projects as well.

2. Pick a Page Builder

Similar to picking a base theme that’s powerful enough to let you build any kind of WordPress site, it’s important to pick a page builder that you can use across all your WordPress projects. Here are some of them that we like:

1. Beaver Builder
2. Elementor
3. Divi

These are also some of the most popular page builders in the market. You don’t need to look further away from these and can choose one of them. Just try the free versions for these plugins and pick one that you like the best.

At our agency we use Beaver Builder for most of the sites we build because we’ve found it to be least bloated compared to the other two, light weight and extremely flexible.

Pro Tip: Each theme and page builder has it’s own learning curve so our advise would be to choose a combination of theme and page builder stick to it. That way you’ll save time from unnecessarily jumping between themes and page builders which will in turn help you increase your overall efficiency and development speed.

At Fantastech we use Astra theme and Beaver Builder plugin combination for most of out client sites and have even built this particular site using the combination. So we’d definitely recommend this combination to you for your websites as well.

3. Setup Global Theme Settings

A WordPress theme is what is responsible for the global look and feel of any WordPress website. Most page builder framework themes (like the ones shared in the list above) provide you with the full range of settings to setup the website’s global page layout, font sizes, font family, colors, header & footer layouts and pretty much every other global setting you can think of.

With a powerful theme you can pretty much build the entire global page layout, header and footer for most of the websites. We use Astra with Astra Pro at our agency and it gives us a powerful set of options and features that allows us to setup the global styling of the website really fast.

These global setting are usually present in Customizer under Appearance in WordPress backend. But some themes like Divi create their own Theme Options page in the backend for doing these global settings.

Now an important thing to note here is these themes come with hundreds of very small settings that you can use to setup your website in any way you want, so it becomes important to learn the theme settings inside-out in order to best utilize all it’s capabilities.

So when you pick a theme make sure to spend at least a few hours to go through the documentation of the theme to know exactly what global settings you can get inside it. Some themes provide more control and others provide less control, so you need to think of this when choosing your theme so that you can move through this particular step more swiftly.

4. Setup Global Settings in the Page Builder

Like themes, page builders also have global settings in which you can set global values for the row and column paddings, margins, font sizes, max width and so on. Again, page builders also come with a ton of such settings and it’s important to learn the page builder of you choice fully, to make the most out of it.

5. Build the Site Header and Footer

Depending upon how complex or easy your designs are, you can build your headers and footers from right inside the theme Customizer settings (or Theme Options). Most themes provide you powerful settings for creating and styling the headers and footer and also manage their responsiveness on mobile and tablet.

If you have simple header with just logo on left and a menu on right, you can set it up by doing simple settings in the theme and creating a menu in the backend.

Similarly if you have a basic footer with a bunch of widgets and a simple footer bar, that’s also fairly easy to build in your theme using widgets and footer related theme settings.

Now there are two issues you might face with this:

1. You finish building the header and footer around 90%, only to realize the customizer does all required settings to finish it fully

It’s possible that when you’re building the header and footer, you’re 90% close to finishing it, but suddenly realize that the customizer does not have a few specific settings that you need to complete it.

In such cases, you might have do some custom CSS or create some custom HTML. These should not be an issue if you know basic HTML or CSS. But if you do not know how to write even basic HTML or CSS, now’s the good time to start learning.

2. The header and footer are too complex to be made using theme customer settings

The other issue you might face is that the designs contain complex header and footer that can’t be made using just the basic settings provided by the theme.

But there’s a solution for this. In most page builders you can build custom rows and sections and save them to be used else where. This opens up a whole lot of new possibilities of what you can build.

So you can build the complex header and footer in page builder itself, save it and then use the row/section globally on the site. In Astra Pro this can be done using Custom Layouts. In other theme there are other names to use the custom structure built in page builder globally on the site.

6. Build Homepage and then Rest of the Pages

So far, you’ve set the website’s global layout, setup the typography and colors and also built the header and footer, now it is time to build the content part for each part of the page, starting with homepage.

Now I don’t need to explain this step to you in detail because if you’ve used any page builder in past, you know how it goes. You start with editing the page in page builder, add rows, columns and modules and build different parts of the page.

In our experience we’ve found that a lot of times after we start building the homepage, we have to go back to steps 3 to 5 as we might miss setting up something global earlier. But it’s good in a way because when we complete building the homepage, we can be sure that everything is now complete in terms of global setup and we start with the internal pages.

The steps up to building homepage is what takes the most amount of time. But once the homepage is ready it becomes very easy to build rest of the pages and you can finish building all internal pages in no time.

So there you go!

This is probably the easiest and most efficient method to convert Figma, Sketch or Adobe XD designs to WordPress.

Does this still look a bit overwhelming?

If this looks a bit overwhelming to you, or you do not have the time to learn a new theme and page builder, that’s totally fine. You can still get your design prototypes converted to WordPress by hiring someone to do it for you.

At Fantastech, we provide conversion of Figma, Sketch and Adobe XD to WordPress as done for you services at very affordable pricing and can help you if you like.

If you’d like someone with experience and expertise to do it for you, do check us out.

And also do share with us what do you think about this method in the comment section below. We’d love to hear back from you.

The post How to Convert Website Design Prototypes to WordPress? appeared first on Fantastech.co!.

The Discovery

A few weeks back when I was going through our Facebook Ads reports, I got really excited to see the average CPC we were getting for our top of funnel campaign.

It was pretty low and the average click-through rate above industry average.

It was all good till I noticed something that made me really upset.

Although we were getting very cheap clicks, only around a third of people were actually waiting for the page to fully load and go through it (in Facebook ads you can see this by adding a column for Landing Page views in the reports).

That was a bit strange, because we were doing everything we could to bring the page load time to as low as we can.

To cross check, I put the URL in Pingdom to see the page load time that looked good:

As you may know, 891 ms is pretty fast but in real world scenario the page might not actually load that fast. The page may take a couple of seconds to load depending upon the user internet speed and distance from the closed CDN.. But those few seconds are still good. enough.

So I was not sure why people were not waiting even for those few seconds to see the complete page and leaving early.

Then I realized, the URL I was checking in Pingdom was:

https://fantastech.co/

But in my ads the URLs were something like this:

https://fantastech.co/?utm_source=facebook&utm_medium=feed&utm_campaign=direct&utm_content=video

We put UTM parameters to our website link to be able to track and measure our ads performance and for all these months we were trying to optimize the homepage and checking in Pingdom without the parameters.

So I put this link with UTM parameters in Pingdom, to my surprise, the load time was almost 3 times that of the link without UTM parameters!

On testing the link in browser, I found that it was taking more than 8 seconds to actually load the page according to my internet speed and location.

That’s too long for most people to wait for the page to load.

Why This Happens?

We use the W3 Total Cache plugin for caching pages on our website. When you enable Page Caching, the plugin caches all the pages as static HTML so that when a visitor opens the page, it loads the page super fast.

But when you open the same URLs with query parameters, like in our case with the UTM parameters, the plugin does not load the static cached HTML and instead loads the pages normally.

That is same as loading the page without caching plugin!

This applies not just to W3 Total Cache, but all caching plugins in general. So if you’re using a caching plugin and sending people to pages with query parameters, the caching won’t work on those pages.

So What Did We Do?

This was a big revelation for us and we realized that for all these months we were draining money with low ROI because people were not even seeing the landing pages fully.

We implemented UTM parameters based on the advice that it’ll help us “granularly track” our marketing campaigns and it made sense when we did it.

But we did not pay attention to the impact it was making on the page load speed.

Also, as we do not run a lot of different variations of ads and usually use the native reports from Facebook Ads and Google Ads to gauge performance of our ads, we were not paying much attention to the UTM report on Google Analytics anyways.

So we decided to get rid of UTM parameters from all our URLs from all ads.

Result

After we made this change, it’s now been over a month. We’re seeing that now, almost two-third of our clicks are resulting in landing page views.

That is twice as much as what we were getting earlier! We were able to double our ROI with a simple change like this and so far it all seems to be working out well.

I highly recommend you try this with your own ads.

Check your ads with UTM parameters and see how many people actually seeing landing page fully after clicking on the ad. Then remove UTM parameters on one of your campaigns that do not depend heavily on UTM tracking and compare the performance with the earlier performance.

If you see any major change in landing page views and in your ROI, you can thank me in the comment section below by sharing your results.

The post Advice to Marketers: Ditch UTM Parameters to Double Your ROI on Paid Ads appeared first on Fantastech.co!.

From an agency’s perspective, WordPress support and maintenance services can be a huge drain on resources. The technical prowess required is what makes all the difference.

A competent team delivering the right set of WordPress support can generate long term profits for your clients. But there are plenty of firms delivering dirt-cheap WP support that simply don’t match your client’s requirements.

So, how do you achieve the famed ‘Swiss Army Knife’ status of WP support services? With a feature rich set of services, you truly can deliver a host of solutions that truly delivers what your client needs. Let’s see how you can be an alternative to ‘run-of-the-mill’ WP support and maintenance companies.

Why WP Support is Long Term Commitment?

There’s so much that your clients can achieve with the right set of WP support. But they should know this fact in the first place. Being a responsible WP solutions provider, I make it a point that my clients know its importance. Here’s why personalized WP maintenance is the way to go.

Pricing

Your client should experience the full pricing benefits that comes with in-house WP support. You can offer site maintenance services as part of the development package with steep discounts. Also, same development team can be part of support solutions thereby decreasing the manual work.

In-House Expertise

Clients shouldn’t be left to fend themselves to choose support solutions after website launch. When the same agency offers maintenance, not only the costs come down but also the integration and automation time is reduced.

Recurring Revenue WP Support Plans

Recurring plans ensure that you are not stuck in an endless ‘time-for-money’ It may generate source of revenue but consistent but is stagnant in the long term. So, its vital that you offer recurring plans that are customizable as per client’s preferences. This safety net generates more predictable cash flow and more clients are covered.

Lower Customer Acquisition Cost

You don’t have to market to your current customers. The services can be bundled alongside the website creation packages. Not only do you bypass marketing costs, you also get referrals from your clients and add value to your services.

Customizations

There can be no better feature than customization since the clients already have gone through the development process. You can offer them unmatched customization because the same developer team has built the website.

What Features to Offer to Clients for WordPress Support

1. 24/7 Uptime Monitoring

Being live all the time is the greatest virtue any website can boast of. Serving your customers all the time is crucial to business development. Your client’s website must have 99.99% up-time to ensure visitors are never left wanting. It can be achieved by using simple plugins.

2. Free Website Edits

Changes are ubiquitous to development. Editing has to be done to incorporate new trends, resolve issues or even evolve the current code. Offer suitable editing opportunities to clients free of cost. This will not only make them subscribe but also improve your chances of getting it right in less counts.

3. WordPress, Theme and Plugins updates

Updates are a constant in WordPress development. Every now and then, a new update comes in for WP version, a plugin or even themes. The changes can bring technical issues that your client may not be able to handle on their own thus requiring expertise. Timely updates done with technical proficiency make sure the website runs right.

4. Automated Backups

Crashes occur all the time. What’s important is how you come out of it. With daily backups, the uptime and recovery time of the website improves significantly. Constantly changing marketing environment demands that your client quickly gets back up on their feet.

5. Website Security Setup and Monitoring

Latest standards of security including HTTPS and regular monitoring is vital. Hacking attacks are a result of non-updated WP versions or old plugins. DDoS attacks can occur in case of websites with ancient attributes. Surveillance of traffic helps identify the culprits and block them effectively. Firewall protection, performance optimization, version controls, SSL certification, staging websites, domain management are some more features to include.

6. Transparent regular reports

Monthly or weekly reports to your clients is an ideal way to not only report on vital matters but also connect for other related issues. Tabulated reports with details of all the issues ensure that concerns can be addressed timely in consultation with the client.

7. 24/7 Priority Email, Chat and Phone Support

Perhaps nothing is more important in WP support than the ability to be available in the time of crisis. It is crucial that 24/7 contact is maintained through one or more channels of communication. Technical expertise must be extended to the client within reasonable time to take prompt action. A dedicated small but expert team must be available as per different time zones.

8. Value Based Pricing

Pricing is, perhaps, the primary concern that your client has consulted you for support. The third party rates are higher out there and they are probably looking for something affordable that matches their requirements. It is critical that your pull something out of your hat to find middle ground. Value based pricing ideally solves this issue since you get your minimum rate and the client gets all the features he is looking for in a WP support package.

WordPress Support is a Treasure Mine, If Done Right!

It’s simple – offering WordPress support and maintenance services can add an extra $100-$200 per client every month! If you create the right customized packages for your clients individually, it can be a gold mine. It spares them the horror of selecting a third-party service and gives your clients the peace of mind.

When agencies just offer ‘plain Jane’ development sans the WP support services, they miss out on a huge opportunity. Be a one stop shop! You can not only increase your profits but also your bottom line significantly.

So, how are you going to start offering WP support and maintenance services to your clients? Let me know.

The post How to Provide WordPress Support to your Agency Clients? appeared first on Fantastech.co!.

And there are a variety of reasons that’ll make you think seriously about outsourcing development so that you can keep your focus on your agency’s core competencies.

Whatever be your reason, outsourcing WordPress development can truly help improve your agency’s bottom line. That’s because its marketing that leads to consistent business growth.

As a web designer, I come across many clients who struggle to create the right balance between in-house WP team and outsourcing development. In the fast paced WordPress realm, constant changes ensure that most clients lag behind and often their marketing efforts too take a back seat. I suggest them that there’s no need to flex your WP muscle and you can outsource it efficiently, economically and viably.

Can outsourcing be the right solution for you? Let’s find out.

1. Biggest Reason To Go For Outsourcing: Cost

For companies without in-house web development or designer staff, an outsourced WordPress team delivers the full spectrum of WP solutions at a fraction of the cost.

Cost is, perhaps, the biggest reason digital firms look towards outsourcing. Small companies and solo firms can avoid using in-house teams and get the work done in a fraction of a budget. There’s no need to drop marketing chores. It is generally observed that web development and digital marketing work in 1:3 which denotes that you can manage development in 1/3^rd price compared to marketing. This translates to huge annual savings.

2. Work With Experts

An experienced web development firm is miles ahead of your in-house team any time. They have been around for a while, building engaging websites and delivering on the quality promise every time. They have managed larger clients with aplomb and your team is hardly a match to these professionals. From regular WP development to constant updates and maintenance, you can trust these guys to get the job done well.

When you choose an outsourcing firm, you get an entire team instead of a single developer. So, there’s a whole lot of talent to tap into for your project’s well being. Most importantly, you can combine the best of marketing experts with web designers and developers to truly create a wholesome team that meets your objectives bang on.

3. Outsourcing is More Efficient

Hiring a development firm costs less than engaging a full time team thereby delivering more bang for your buck. The timelines are more strict, the goals more achievable and the strategies more efficient. You’ve got many years worth of experience working on your project. No wonder meeting project deadlines are met effectively and your website is completed well within time.

4. More Accountability

Just like any other vendor partnership, WP development is also highly dependent on the accountability factor. Building a long-term relationship with a well established WP firm ensures long term cost benefits. Also, their accountability increases manifold since they have signed a non-disclosure contract that not only helps maintain secrecy but also ensures deliverables. Over time, the WP vendor works with you more as a partner, giving you fresh views on your project and helping it grow organically.

5. Take Pressure Off Your In-House Resources

Outsourcing makes sense in case your team is thin. When you have short marketing deadlines to meet, outsourcing can make a world of difference compared to hiring more employees. Your team can deliver on your client’s marketing objectives while the development and maintenance work if overseen by the outsourcer. It is a great way to impress clients since you can bank on the professional expertise of an entire firm by your side.

6. Quality Assurance

Whether it is HTTPS implementation or regular maintenance, you can rest assured that the professionals have everything in control. The guys at the WP development agency will make sure that the quality aspects are well looked after. Right from the minute lines of code to the full spectrum of support solutions, you can relax when it comes to website development and maintenance.

7. Professional Maintenance & Support

You can spend more time on the marketing algorithms performance when you know the WP guys are there for emergency maintenance and support. The professionals not only guarantee more uptime, they also undertake periodic maintenance and support for any changes in the WP platform. There are less security issues to worry about. From theme updates to plugin changes, you can bank on them to undertake the necessary tasks.

There’s More To Outsourcing Than Just Website Development

Outsourcing is on the rise. It is no doubt that marketing agencies have a lot to gain from outsourcing WP development to third party firms. Having a professional to answer client’s queries can go a long way in making your brand successful. With time, you can be self-assured that a good outsourcing partner can not only save money but also lessen your delegation duties thereby increasing your firm’s bottom line.

Once you have a network of right partners working for you, there’s no stopping you. My personal experience suggests that a good WP development partner is worth its weight in gold.

What are your thoughts on the outsourcing realm? Share with us today.

The post 7 Reasons Why Digital Agencies Should Outsource WordPress Development appeared first on Fantastech.co!.

Being a WordPress agency owner, I know WordPress can be intimidating to the uninitiated. In the beginning, new users tend to feel helpless when they encounter so much features and functionality on offer. It’s no wonder that right after they log in for the first time, the developer gets a query call.

A bad first impression can cause trouble for you at a later stage. Consider this:

• Client decides that WordPress is a tough cookie and abandons updates altogether. In case you restrict their access, they still mess up the layouts and it inevitably breaks the site. They hire a WordPress developer and seek support elsewhere; thereby diminishing your image.

So, before they call you and say, “I don’t know what happened to the website”, you should make necessary arrangements. That’s why I strongly suggest that you provide adequate WordPress training to your clients. This client empowerment let’s them take control of their website, allowing you to focus on the next project.

So, why should you provide WordPress training to your clients in the first place?

4 Reasons to Provide WordPress CMS Training to Your Clients

Training your clients to operate WP offers several benefits. Here are 4 reasons why you should go the extra mile.

Empowerment

Training your client to use WP is a great way to enhance the customer experience. Only they can truly implement their marketing strategy through the website’s various features and functions. Helping them realize the full potential of their website adds significantly to their overall website strategy implementation.

Reduce Support Calls

This is important. When client knows basic functionality, they can certainly perform simple tasks and undertake adequate troubleshooting themselves. When you familiarize clients with the dashboard, they won’t be disturbing you with constant support calls at odd hours.

Better Client Experience

During the training phase, when you work with the client and train them, their overall relation with you improves. They realize your dedication for their project. This improves your market value and they are more inclined to recommend you in their network. Your testimonials are going to sound much better.

Upsell Opportunity

WP training can truly present you an upsell opportunity. This training program can be sold as a standalone service for an extra cost to your client. Or you may put a value on it and offer it as a free addon to your service within the overall cost.

How to Start Imparting Training to Client

Prepare

Before you begin the actual training, there’s a significant prepping to be done first. To start with, you have to decide on the factors such as medium, create user accounts, clean up admin dashboard, and prepare an outline, presentation or a sequential flowchart for the clients. Here, you can also create a syllabus of sorts to be covered in the training.

Tools

Next, you have to decide on the tools. What medium will you be imparting the training on? How and where you are going to impart WP training is vital. In case the clients are local, the location can be physical, perhaps even your office. For international clients, it’s better to go for live video tutorials or a conference call. Tools related to screen share, video calls, recording software and to create presentations are basic necessities. It’s always a good idea to record your training sessions with the client and send the recording to them so that they can come back to it whenever required.

Schedule and Timeline

Once you have the outline of the training elements, you should schedule them in a definite timeline. The schedule must not be overwhelming containing excessive WP elements. Stick to the basic ones that will train the client for performing basic tasks. Adequate timeline must then be set to complete the training in the requisite time period.

What to Include in WordPress Training?

Dashboard Walkthrough

The first and foremost view is of the dashboard. You’ll want to show your client how everything begins in WP. Take your client on a visual tour of their website from the backend to begin on a right note. Take short stroll through various pages and introduce them to the WP terminology. Here you can explain about the various modules including media, pages, posts, plugins, and others. Password reset and basic security must be discussed right here.

Adding New Posts and Pages

Perhaps the first concept to teach to the client is how to add new pages and posts. This can feature how to create new posts, edit existing posts, how to format text, schedule posts, how to set categories, adding media/images to the post and updating content regularly.

• Where to write/edit the content including title, paragraphs, headings and bullet lists etc.
• How to add images and links to the text.
• Explain about setting categories, featured images, tags, and SEO.
• ‘Save as Draft’, ‘Preview’ and ‘Publish’.

This forms the crux of your training since most queries center around these topics.

Modifying Custom Post Types and Fields

A custom post type is just like any other regular post but are used for unique unique content types. Custom post types might have been used on the website to create content types like movies, books, reviews, products and so on. You can train clients for basics such as:

• How to add/edit custom posts?
• How to add/edit custom fields in these custom posts?
• How to add new taxonomies and attach to the custom posts?

Customizer or Theme Options

Whether you are using child themes or professional grade themes, your clients should know how to undertake basic alterations. In this session, you can include:

• How to modify various sitewide settings
• Modify global color schemes, font sizes and font families
• Change website logo and favicon
• Change WP title and tagline
• Change social media links
• All other important sitewide settings.

Allowing clients to edit these global settings can be dangerous and client might change a setting that might end up breaking the whole site. Make sure you caution your client about the same during the training. Or if you’re not sure about you client you may just lock these pages from you client all together so they can not make the changes after you deliver.

Main Page Builder Elements

Your clients must be able to easily create and edit grid based pages. The WP interface is intuitive enough to learn rows, columns and basic modules editing easily. You can focus on these basics in this training:

• Navigation Interface
• Start Building page or use default templates
• Drag and drop explanations
• Clone elements, row and column arrangements
• Add/edit images, image filters and image source controls
• Custom heading element.
• Create tours, accordions and tabs
• Add background effect for row
• Video background and custom CSS to elements

Working with Images and Media

Next, the client must be trained how to handle various media and particularly images in the media library. How to go around the media library, step by step, must be discussed. Limits to the upload and using right image in between the post should be adhered to.

Editing Menus and Sidebar Widgets

Creating new pages to the menus, link to taxonomies and categories, editing navigation should be next in the line. Widgets must be explained in detail probably using video walk-through.

In the Menu section you can create, delete or edit the menu. The pages to be added, links and even categories can be added in the menu as per the user’s preferences.

For the Widgets, simply click on ‘Widgets’ and the left sidebar will display the widget areas list. These can vary as per theme. The ‘Sidebar’ will show your current setup and you can drag them around to rearrange them. These can be removed or added right here and all the relevant controls will be upfront.

General Plugin Related Settings

Plugins can be quite a handful. The client should be made aware about the function and relevance of each plugin. Most plugins are straightforward in terms of function layouts. SEO plugins must be set for client and their tuning must be discussed as per the client’s marketing goals.

Updating the Content

A common request from clients is how they can edit pages. You can walk them through using an example. Start with simple changes such as change header tag, add a new sub-heading, delete an image etc. Save the change by clicking ‘Publish’ and then show the changes on the live website. Also, show them how they can reverse the changes using the same route.

Word of Caution

While it’s great that your client is learning to walk the muddy WP waters on his own, he should also understand the risks. At the end of the training, it is crucial that you let them know the implications of making significant changes to WordPress dashboard. They must understand that certain codes and areas are off limits. Some actions have predictable outcomes but others can lead to damaging consequences. Thus, you must tell them, ‘what they can’t do.” Sticking to basic WP course is best for newbie clients.

Empowering Clients Through WordPress Training

Assuming your clients would understand everything through video tutorials is wishful thinking. Every website is unique and you need to walk your client through it’s important elements. For many of them, WP training can decide whether they’ll continue with you long term or not.

Most importantly, when you train them for WP, you ensure they never beg for help. Whenever they need assistance, they won’t wait for your call. This makes a huge positive impact on your relationship.

The lesson here? It shows them that WP isn’t scary. And that you, as an agency, go beyond just designing websites.

The post How to Train Your Clients to Use WordPress Dashboard? appeared first on Fantastech.co!.

When it comes to selecting the perfect WordPress outsourcing firm, companies shouldn’t dive head on! Today, outsourcing has become easier and therefore dangerous too. Just because it worked for your competitor, doesn’t mean it will work perfectly for you as well. Despite numerous advantages, successful IT firms still commit monumental blunders while choosing a WP outsourcing firm ultimately leading to additional costs and project delays.

Before you begin, ask yourself these 3 ‘Whats’:

• What are the requirements of your WP website?
• What is your target audience?
• What is the budget?

Unlike other CMS platforms like Magento or Drupal, WordPress is different in every sense. Thus, choosing a WP offshore partner firm can be daunting. Here is a 5 point checklist to help you avoid the pitfalls of selecting an outsourcing partner.

1. Money Isn’t and Shouldn’t be the Sole Selection Criteria

Cost savings is one of the primary reasons of moving a project offshore. Firms offering the lowest bid prices are often selected while ignoring the quality aspect. It is pertinent to note that intangible benefits offered by a quality-focused outsourcing partner can be far more rewarding compared to the one offering lowest rates. During selection, focus on prime business realms such as:

• Operational reliability,
• Process efficiency
• Tools employed including plugins, coding language etc.
• WordPress development and design experience
• WP development environment, methodologies and much more.
• Customer support and post-project deliverables

Remember, we have to lower the cost relative to your current budget. Quality of WordPress work, especially coding, should be balanced as such. Hidden costs or additional charges, if any, should be discussed in detail.

Check if your provider has ISO certificates, Microsoft competency, CMMi, and Google certificates to manage projects, and to preserve the quality and delivery of work.

2. Code Quality

Gibberish code won’t get you anywhere. Coding is an art that few understand. I personally know many coders who get the work done but leave many loopholes that can be compromised. This is a grave mistake. Here are a few aspects that can help you judge a good quality code:

• Code must be standards-compliant and valid.
• Conform to WordPress standards.
• Maintainable and scalable code that’s easy to build upon.
• Correct implementation of WordPress functions, APIs, hooks and classes.
• Inclusive code that receives visitors without any sensory bias.
• Efficient, logical code with minimal bloating.
• Code that does not compromise on the website’s security.
• CSS and HTML5 semantic code with right markup structuring.
• Cross device and browser compatibility.

Remember, code is the foundation on which you build your website. Don’t compromise on code, ever!

3. Define KPIs Well in Advance

During the initial consultation stage, it is vital that both parties know the ‘Key Performance Indicators’ well. This is ideal to measure outsourcing firm’s performance, create clarity of specific performance objectives, conduct periodic analysis, improve collaboration and foster a mutually beneficial environment. Wrong selection of KPI’s can harm your relation right from the word ‘Go’. In WordPress development outsourcing you should ideally look for following KPIs:

• WP trend analysis
• Gap analysis
• Budget performance
• Benchmarking for coding
• Value additions and cost savings
• Cycle time analysis
• Work order completion timeline

Technical indicators such as organic traffic, bounce rate, time on site, page views per session and inbound links should be discussed if WordPress SEO is also involved in the project. Avoid selecting pre-defined KPIs. Instead, choose ones that are specific to your project.

4. If Isn’t Latest, It’s Already Outdated

WordPress is something that evolves every day. The desire for something new and mind-blowing pervades in WP realm. So, if your partner offshore firm isn’t keen on the latest, you might as well drop them. Adhering to latest WP design trends, themes, graphics and coding ensures that your website or plugin remains in vogue and is loved by your audience.

In all possibility, the quality of resources will help you make the decision. As a rule, check these factors:

• Customizing theme templates
• Transfer a graphic design (e.g. PSD format) into a working website
• Create and customize an original plugin
• Availability of professionally qualified WordPress developers and coders.
• Reasonable number of projects undertaken proportionate to experience.
• Implementation of latest coding standards
• Non technical concerns like working ethics, legal risks and cultural differences.

When you are choosing the firm, make sure it has a grip on the latest technologies. Have a detailed discussion about their techniques and tools. Also, check out their latest portfolio to take a deep look into their recent projects. If possible, talk to their current clients.

5. Poor Communication

It’s a big red flag. Poor governance is the prime reason why most outsourcing relationships fail. Remember, it is not a ‘Select-Hire-Forget It’ relation. You have to pay proper attention to the nitty-gritty of the WordPress development. For example, if your partner is developing a staging website, you should be able to make suitable changes before the final website is finalized. In case of plugin development, you should be able to check its functionality and make live changes.

Strong communication should be maintained going past the first meetings. Accessibility of both the parties for milestones, inquiries and project deliverables must be consistent. Use all available communication resources such as video calls, VoLTE, Skype calls etc. Relying solely on written messages can spell disaster. In complex WordPress projects, miscommunication can lead to enormous costs. To avoid a strategic failure, it is vital to maintain an open discourse all throughout the project.

Bonus: 6. Ignoring Intellectual Property Rights and Patents

It is important that your vendor understands the intellectual property rights and patents as per your country. WordPress is open source and so is PHP. However, other data used in the website, app or plugin have specific regulations and laws governing them.

• Did you own full rights to the final code?
• Is the final code editable or is the code script is enriched with comments?
• Does the code feature proper documentation for legal compliance?

Before choosing an outsourcing partner, make sure that they agree to your confidentiality agreement and adhere to your IP rights and patents.

WordPress outsourcing can deliver enormous benefits in terms of cost savings and quality both. How you select your partner defines how much benefits you reap in the long run. Avoid these 5 pitfalls and you will surely be shaking hands with the right people to do your job.

The post 5 Point Checklist to Avoid Outsourcing to a Wrong WordPress Firm appeared first on Fantastech.co!.