Category: Web Design

1. Run a PageSpeed test

GTMetrix & Google PageSpeed Insights are the most popular tools to test page speed of any website. Google PageSpeed Insights is my personal favourite. These tools will get you a detailed report on what issues you have to resolve to speed up your website.

2. Use a Custom WordPress theme

More than 70% of WordPress websites are using pre-built templates from market places. Testing it with Google PageSpeed insights you will shock you! Mobile page speed score will be less than 50%. Thats because of tons of modules that comes as features which you will never use. Unless you use a good WordPress theme you will be landing in a no-mans land. It will be nightmare to optimise your WordPress website. So choose your WordPress theme wisely! I prefer a custom built theme. You will have complete control over the theme and optimise it for performance.

3. Optimise Images

You can compress and serve scaled images. I use compressjpeg.com to compress jpeg and compresspng.com to compress png. You can use modern day image formats like WebP, JPEG XR or JPEG 2000. You have to be aware of the fact browsers like Mozilla and Safari are not supporting WebP.

4. Merge JS & CSS files

Use fewer JS & CSS files. Lesser the request will lead to better performance.

5. Defer blocking CSS & JS

Deferring blocking CSS & JS files will allow the browser to print the page immediately. You can use defer attribute to defer your JS files and pass css path using JS after detecting page load.

6. Use CSS Image Sprites

Using image sprites will reduce the number of requests your web page has. Combine social media icons and other icons into one image. This will show a drastic improvement in performance. We accomplished this in Dezvolta’s official website. We combined 30+ images into one image sprite reducing 29 extra requests.

7. Use Lazy-load

If your website has lots of images? Lazy load your images so your images will render only when the user scrolls to that section. You can see a jump in performance as soon as you use this technique. Refer this article on Google which explains how to lazy load images & video.

8. Enable Gzip & Leverage browser caching

Copy & paste the following lines in your .htaccess file. This will enable Gzip & leverage browser caching.

# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent


ExpiresActive On
# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
# CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
# Video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
# Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"

9. Replace Slider Revolution with Owl Carousel

Slider Revolution will slow down your WordPress website. You can consider simple alternatives like owl carousel or any custom sliders.

10. Replace Yoast SEO with All In One SEO

Yoast SEO is the most popular SEO plugin. If you replace it with All in One SEO you can see 10% jump in Google PageSpeed Score.

11. Use PHP 7

PHP 7 is twice as fast as PHP 5. It has better memory consumption than PHP 5. Your WordPress will run lot faster in PHP 7.

12. Use a CDN

You can avoid latency issues by investing on the right CDN. Our visitors are from Europe, US & India so our CDN locations are North America, Europe & Tokyo. If you are looking for cost effective & easy to use option i recommend BunnyCDN.

13. Remove any unused Plugins

Uninstall unused plugins. If you follow the above steps you don’t even need a caching plugin. We don’t use a caching plugin for our website.

14. Choose a Good hosting Company

I recommend highly secure & high-performance WordPress hosting from SiteGround. If you are looking for high performance cloud hosting you can prefer:

• Amazon AWS
• Google Cloud
• Linode(Linode offers managed cloud hosting services)

1. Old School Web Layouts Don’t Work

Being ready to adopt change is important and customers get instantly turned off when they see a website that looks so nostalgic. Not in a good way because any design element or template could be considered retro in a matter of months or years in this fast-changing world. If you haven’t redesigned your existing website in the past 3-5 years, you are missing out on a large portion of your potential customers and it’s time to approach a reputed website design company.

2. Inconsistent, Random Design Elements Thrown In

A seamless visual express is a key to attracting your visitors and converting them. The website’s layout, if it begins with bright, light colors and bold fonts, it should continue all over. Switching to a black and white tone or simply introducing too many images instead of content scream inconsistency. It forces users to feel alienated and abandon the page. Avoid it by keeping your web design consistent throughout the pages and offer a smooth wave-like experience for your visitors.

3. Never Use Too Many Fonts on the Same Page

Another common mistake that is sometimes triggered by sheer creativity is using too many fonts on the same page. Just imagine an amateurishly designed web page where you have used fonts like Georgia, Futura, and Helvetica to make an announcement, any average human will find it very difficult to understand the flow and the message inside it. A good design aesthetic is to go with a major font for the website combined with a secondary font. They should be web-friendly, look professional and set the tone for your business.

4. Infusing Many Colors at Once

A strict no! Much similar to how using multiple fonts in a single page would affect the user’s capability to read and understand the content, too many shades of colors would make any new user find it tough to cope up with the layout. You can choose a color that is slightly similar to the shades used in your logo or go with completely contrasting colors than your logo to differentiate them on the website. Pick colors that pair with one another and maintain them throughout the website.

5. Inconsistent Spacing

Follow the guidelines of design principle proximity when creating boxes, icons and placing headers. The content area and images should merge with one another with the right amount of spacing. If they are too tight, they look cramped and your customer conversion rate will get affected as they may choose to close the website. Similarly, large spaces could create emptiness on the website’s layout making it harder to follow what’s your primary objective is.

1. Navigation – Keep it Simple

Most people miss the fact that a new visitor feels alienated in a website if the navigation isn’t simple and easy to understand. Keep it simple, the navigational menus should be readily accessible and make sure they are not too many in number. You can go with a three or five-button navigation bar on top but keep it in the same location even when the bottom area of the website would keep changing.

2. Responsive Theme – Works Seamlessly on Any Device

Choosing a great-looking theme is important but picking a responsive theme is mandatory. Users no longer browse websites on a desktop but they use smartphones and tablets. Keeping it more accessible, seamless and maintaining the design elements will ensure better conversion rates.

3. An About Us Column – Introduce Yourself

Personalization is everything! With hundreds of websites online, it’s integral to help your audience connect with your brand. An About Us column will help introduce yourself, share your views, dreams and what’s your ultimate goal. Keep the description simple, to the point and more personalized. It should do the trick!

4. Call to Action – Trigger More Signups

A website is the key to getting your potential customers onboard. The right web design can play magic in your visitor’s minds. Use flashy bright colors, try a unique font or use boxes, scroll animation to let them know it’s the place to sign up. Using a signup form is another way of converting visitors into customers. This is one of the important elements that you just can’t miss on your website.

5. Frequently Asked Questions – Answer Them Diligently

The Frequently Asked Questions section, FAQs is there for a reason. Your visitor may have lots of unanswered questions, things they like to know before using your website. Be it a service provider, an e-commerce or a company website, all the basic questions should be answered diligently to gain that vote of confidence before they proceed to do business with you.

6. Create a Contact Page – Just the Basics

When people feel that you really have a presence and have an office established, it boosts the credibility factor. The contact page should provide the office address, different locations where your brand is located, vendors and locations marked on Google map.

7. Try Personalized Photoshoots – Stock Photos are Fine

Photographs are required to represent a product, community or the services you offer. Most websites use cheesy stock photos which you can avoid by hosting your own personalized photoshoots, if your budget permits. An alternative would be to use custom-made logos, icons and illustrations to convey the idea.

8. Offer Informative Content – Build Credibility

Give your visitors something that they might not immediately get from your competitors or any other site for that matter. Create white papers, eBooks or useful, informative guide on your primary area of expertise. It should help you acquire contact information like e-mail while building a credible brand name among your target audience.

9. Stylish Buttons – Catchy Ones Work

Whenever you use a button on your website, it should be easy to understand and immediately catch one’s attention. Make use of its prominence by using call to action words. Ask your users to sign up, download the software or offer free stuff through these catchy buttons that help grab their attention.

10. Bullet Points – Easy to Read

Bullet points are must-have elements on your new website because they help describe features, product highlights and are easy to read compared to long paragraphs. Design them in such a way that they instantly convey the message.