December 2016 - ColorWhistle

WEB, APP, UI and Graphic Design trends in 2017

Posted on December 30, 2016February 20, 2019 by Sankar

Hey! And we are back to update you with the Design trends for 2017.

The article that we wrote last year about the predictions for design trends in 2016, was the most viewed article in our blog.

When it comes to design, what we feel is, 2017 will be a mixture of bold old and new trends.

It will carry forward some old trends and try to adopt some new stuff too.

We expect some already prevailing trends like Responsive Website Development and Mobile first approach.

Here are some of the design trends we feel will take the first seat in 2017.

There are some interesting changes too that are expected in 2017.

Lets walk through one by one.

The Mobile-First approach

Its always a trend that the design phase starts from the desktop and mobile comes as a secondary option.

But right from the moment Google announced that more emphasis will be given to websites that has a mobile optimised website design, people have started to think about having a more mobile friendly website.

Image Credit: wpengine.netdna-cdn.com

Here is an article which talks about Google’s New Mobile Friendliness Update

Here is an article which discusses the pros and cons of a mobile First Approach.

Responsive Web Development

If you’ve been reading around the subject of responsive web design and website development>, then you will have most likely encountered the term ‘responsive design’.

But what does this mean?

Image Credit: 4.bp.blogspot.com

Simply put, responsive web design means that a website has been built in such a way that the design and shape will change in order to accommodate different screen sizes and resolutions.

Thus a website should look good whether you’re viewing it on a tiny smartphone or a massive 4K television set.

Here is the article that talks on how to plan a responsive web design and development for your business.

96% of smartphone users have encountered sites that were not properly optimised for mobile devices.

This is a good info-graph that states that people are likely to abandon a site that is not responsive.

What else!

This emphasises that your website needs to be responsive.

So we can expect more websites adapting to Responsiveness in 2017.

That is a necessity too!

Here are some more good reads that proves our point.

Clean Full screen Videos

Adding videos that are totally immersive is a current trend that most websites follow.

Videos are a visual medium that sticks easily in the viewers mind.

Image Credit: mobirise.com

This doesnt mean that conventional imageary is going to dissappear.

But in 2017, the emergence of rich and interactive videos that are used as a medium of engagement with the users will bring a significant change in the industry.

Here is an informative blog that says where you need to be carefull with homepage videos.

Here is a blog about Why Your Website Needs an Introductory Video

https://www.impactbnd.com/blog/3-reasons-why-your-website-needs-introductory-video

Fantastic Bespoke illustrations

Whats more special than using illustrations that are tailor made just for you. Bespoke illustrations help to create a more engaging visual interpretation than stock imagery.

Using illustrations opens up a wide creative medium and the visual engagement exponentially multiplies when the same is animated.

In 2017, these illustrations are expected to outsmart the stock imagery to create more room for visual language.

Drop box is one popular example for bespoke illustrations.

Image Credit: dropbox.com

UX Stats that Could Help Improve Your Website:

User Experience is a critical part of web design and should be a big priority for businesses of any size. Providing good UX can be the difference between a website that generates lots of leads and one that struggles to get any online business leads. So, it really is an important part of your business strategy.
If you take a look at this infographic 15 Website and UX Statistics of 2019, there are some stand-out figures that may cause you to rethink your current digital strategy. Are you prioritizing mobile users? As you can see in the infographic, 2 out of 3 minutes spent online are
via mobile, so this is the group that all your content and navigation should be geared towards.
Did you know that you only have on average 10 seconds to impress your website visitors? Therefore, whatever content you have on your website that visitors take in within 10 seconds is extremely important. Think about where to put your content for maximum impact within that short timeframe.
Another key stat shows that video content is 53 times more likely to reach the first page of Google. So if you want to boost your traffic volumes, you really do need to start thinking about
incorporating high quality video content into your website. As well as being the format that users want to receive any information from, the search engines love high quality video content, so it is a great way to improve your website’s SEO.
Slow loading images are a big problem on websites, with 39% of users abandoning a website if the images don’t load quickly enough. So it could be time to check out those loading times and optimize your images.

More and more parallax

Parallax effect has been a trend for quite some time and its more popular because it plays a vital role in visitor engagement and directing the course of visitor attention.

Parallax effect makes the site easily navigable and creates a narrative around your brand.

Here is an article about the advantages and disadvantages with solutions to overcome them in parallax pages.

One more article on why parallax scrolling in web design is awesome

Image Credit: http://www.webgranth.com/

Enhancing UX with Micro Interactions

Microinteractions are subtle animations created for any task in a website or appliction. Just adding an item to cart, toggle buttons are all some small examples of microinteractions which we see on a normal basis.

these microinteractions help the vistor to easily connect with the application and helps enhance the user experience.

Image Credit: 67.media.tumblr.com

Image Credit: netdna.webdesignerdepot.com

Here is an article on how we can use microinteractions to enhance the visitor experience..

The following one more great read too!!

Besides the above listed techiniques, there are few more predictions like

1. Use of more bold colors
2. More use of cards and grid UI
3. usage of material design frameworks
4. Widespread utilisation of rapid prototyping tools

So What Next?

And yes!! These are our predictions for 2017. There can be more to this list and we will keep updating this post from time to time, when we find anything interesting.

Also contact us for any graphic design or web design or an app design that is in line with the current trends. We are sure to listen and help you achieve your dream design.

Also, don’t forget to check out these huge graphic design trends that will take over 2018.

AMP Development for SEO benefits and Google Friendly

Posted on December 26, 2016February 26, 2020 by Sankar

Mobile publishing is a rapidly evolving environment and Google’s AMP Development is aimed at cutting down mobile page load times and improving website experience for the end user.

The basic idea is to cut down load time for a mobile web page from eight seconds to something like half a second.

Why has mobile publishing become such a competitive field?

The answer is Mobilegeddon – Google’s algorithm that gives priority to web pages that display well on smartphones and mobile devices.

Considering that, according to emarketer.com, there are expected to be 2.56 billion smartphone users by 2018, everyone who has a website has a reason to look at how their website performs on mobile gadgets.

AMP is essentially an open-source framework that helps create mobile web pages that are faster and more finger-friendly for mobile device users who tend to spend hours online. AMP has three components:

AMP HTML: It is a customized mark-up language for AMP.

While it has some differences from HTML, as long as you are comfortable with HTML it is not extremely challenging to adapt existing pages to AMP HTML.

AMP JS: This is a customized JavaScript framework for mobile pages. Third-party JavaScript is not permitted with AMP.

AMP CDN: This optional Content Delivery Network takes AMP-enabled pages, caches them and also automatically makes performance optimizations.

AMP Development for SEO Website

First thing you have to keep in mind while enabling your website for AMP is that this is primarily a framework for making your pages load faster.

Which means a lot of what is behind the page will have to be cut down like:

Third party JavaScript : It means that you will not be able to have lead forms, on-page comments and other elements that you have right now
Site template : This will, in all likelihood, need to be rewritten. Your CSS will need to be must be in-line and less than 50K, your fonts will need to be loaded through a amp-font extension
Multimedia : Images will need to be explicitly sized using an extension and videos can be embedded using a separate extended component.

Again, most of this is not complicated and ultimately serves the purpose of making the mobile web experience better for the end user.

AMP and WordPress Website Development

If your website has been developed on WordPress, AMP development can be implemented for that as well.

There are plugins that you can download that starts off the process like Automatic AMP Plug-in recommended by Yoast.

There are plug-ins to further improve the output like the Glue plug-in also from Yoast.

The automatic plug in will create a AMP version of your site but it hardly allows for customization.

The Custom AMP Plugin solves that problem in conjunction with the AMP plug-in.

Like most business owners, however, you can always choose to hand over the AMP transition to a WordPress website development expert.

AMP + WordPress Website SEO

So we know that AMP allows for faster websites on mobile devices.

How does it benefit your SEO activities?

Given that millions of people access search engines through mobile devices, boosting your website with AMP can help you achieve better rankings on the SERP.

Admittedly AMP development is not yet at a place where it directly impacts rankings. The usual suspects are still in play: keywords, page authority, organic traffic.

What AMP can do is that it will effect user clicks, the user experience and impressions and therefore the traffic to your website.

Plus, in the current set up Google displays AMP pages in a carousel above the fold on a mobile phone.

Organic search results get pushed down. If your website makes it to the carousel, it certainly has a higher probability of getting clicked on.

If you want to see what AMP looks like on Google SERP, you can access their demo on your mobile phone at g.co/ampdemo

Although the display carousel won’t always be there, AMP will continue to affect the Google search rankings.

Google’s mobile algorithm (Mobilegeddon) ranks websites based on mobile friendliness.

Any website failing the mobile-friendliness test gets thrown out of the SERP.

Since AMP development is aimed at making sites more mobile friendly it stands to reason that SEO backed up by AMP will only improve your websites rankings.

Plus, the ever advancing algorithm will soon be looking for the following things on AMP pages to make them more Google-friendly:

Headline : Catchy, actionable, no fluff
The Hero image : Compelling, original
100-word intro : Engages the leader to generate clicks

Local search results may be based on click behavior; Google may return either AMP development pages or local content.

It is still safe to assume that over time there would certainly be an inclination for AMP pages.

Mobile devices have improved over the years but regardless of technical advances, people are looking for quick responses from websites on their phones.

With brilliant content and appropriate optimization, AMP increases the chances of your website being visited more often simply for its ease of access.

What does AMP mean for Ad Monetization?

People tend to use ad blockers to improve the speed of download.

In that case, AMP development can actually be a positive thing because it aims to support ad formats and technologies without impacting the load time.

This may lead to lesser ad blocking.

Most of the popular networks are using the ad component which results in better compatibility.

Amazon A9, Google DoubleClick, Filte, Taboola and many more are some of the networks.

More and more networks are added every day.

Even paying brands can get better impressions although Search Engine Journal thinks that there will less paid ad options and more competition.

What else is out there?

Facebook has its Instant Articles and Apple has its Apple News.

Both are accessible through the apps on your mobile phone.

The other advantage of AMP is that you can distribute content on the open web without the need of an app.

Both Instant Articles and Apple News are news aggregators built on syndication platforms.

They have some big name tie-ups but, according to Search Engine Journal, more and more publishers are opting to go with Google AMP because they get tracking, monetizing, and easier implementation.

How to Develop AMP on your WordPress website?

You can start off at https://github.com/Automattic/amp-wp and download the zip file.

Then go to your website and add the plug-in. You can add images and other media.

Then you need to validate the pages, then validate the schema markup, and lastly Google Analytics.

You could take time out to change your WordPress website to AMP or you could opt to go with a WordPress website developer who can also throw in any number of customisations you want.

I am not saying you have to choose the AMP way, but you also don’t want to be behind the curve when AMP becomes the norm for mobile user experience.

There is a good chance that it will.

ColorWhistle’s clientele is both local and global. We are helping small and medium scale businesses ramp up their online presence in line with their business objectives.

Importance of White Label Website Development

Posted on December 20, 2016May 10, 2019 by Sankar

Many companies may have great web development ideas but might lack the in-house talent to execute those ideas. In such situations, white label website development can step in and help those companies to take on projects they couldn’t consider before.

What is White Label Website Development?

White label website development is the web development version of ghostwriting

For example, Company A develops the website and Company B buys it. Here, Company A does not associate its brand to the website it developed. On the other hand, Company B gets full freedom to use its own brand, logo and identity with the website developed by Company A.

Agencies dealing with WordPress CMS Plugins, and WordPress themes can truly benefit from white label development services.

Importance of White Label Web Development

The main business opportunities present and advantages are as follows:

Easy Branding

By opting for white label website development you have the advantage of not having to spend time and effort on research or gathering technical know-how. You get a ready-made solution that you can apply your brand name to. Only your brand will be visible to your clients.

You will have clients who don’t know what WordPress is (and don’t want to know either). They are bound to be confused when their website footer or login page has any reference to WordPress. By opting for a white labeling solution you ensure that only the relevant brand is visible to the client.

Offer More Services to Your Clients

You may avoid developing custom WordPress themes because of a lack of expertise within your agency or probably due to difficulty in budgeting a full-time employee. However, if you went with a white label WordPress developer, you could offer this service to your customers without worrying about expertise or budget.

Reduce Time to Market

If your customers are looking for WordPress solutions, what something like a white label plugin does is that you can deliver this solution quickly instead of spending weeks developing your own solution. This prevents your customers from going elsewhere for these solutions. Given that web development is a highly competitive field any reduction in time to market is ultimately beneficial to you.

Cost-effective Solutions

You must remember that customized development is a time-intensive process that involves architecture, design, development and testing. You may not always have the resources to work on custom solutions from scratch. Even a single client customization can take weeks. This increases the cost of production. WordPress white label website development helps you deliver cost-effective solutions by allowing you to invest in already existing solutions.

Opportunity for Value Add

One of the lesser known reasons for choosing a white label option is the fact that you can actually create additional support documents with your branding on them. Even if the website is developed using WordPress, the dashboard can be used to link back to your support documentation and even support videos.

Focusing on Sales is More Productive

The major reason why white label website development becomes important to your business is that it allows you to focus on ways to increase sales.

Additionally, you may need assistance in increasing production capacity for one of your competencies temporarily so that you don’t miss out on potential sales. Even in that case, white labeling is an ideal option.

Benefits of White Label Website Development

White labeling is primarily a branding exercise. For you as a web development agency, the advantage of exposing the end user to a brand consistently throughout your website is highly desirable.

Imagine you develop a WordPress website for a client and when the customer logs in, they get the WordPress logo. It is an immediate visual disconnect from the intended brand. Most likely customers are thinking, Why am I going to a WordPress site? A few changes in the code can get the logo to be the logo of the intended brand.

Moreover, the information about the theme, contact information and support documentation can all be customized to reflect your company’s brand. This does two things, the end user is always connected to your client’s brand and your client is always connected to yours.

Some agencies may not want to opt for a white-labeled partner because of inconsistent output from a subcontractor which ends up giving the impression to the client that they are not good. This, of course, you can counter by choosing a white label service provider who has a proven track record. You needn’t make the decision based on a single meeting. You could always test them for something small or give them projects that their portfolio shows they are good at.

From our experience as a White Label service provider, we find that as long as our output meets or exceeds the expectations or the agency’s clients, our development partners even go so far as to share with their customers that we are their subcontractors. Thus, the choice of white labeling or transparent outsourcing is entirely with you and based on:

Your comfort with the idea of white labeling
Your long-term customers’ comfort with the idea of white labeling
Your experience with a white label partner; if the output is consistently good, then you may choose this route for all your clients

Are You Ready to Choose a White Label Website Development Partner?

In summary, developing a WordPress website with the help of a white label partner is definitely an option when it comes to increasing sales. It helps you to focus on your core business and identifies avenues for expanding services and products that you offer your clients. Since white labeling is primarily a branding exercise, it also helps you to develop consistent branding for both yourself and your client while not having to invest in infrastructure, technical know-how and time.

If you need any help with any development work, don’t hesitate to contact us.

Did you get benefitted from white label website development? Share your experience in the comments section below.

Magento Website Development, Installation and Modules

Posted on December 13, 2016February 20, 2019 by Sankar

Introduction:

Magento is the world’s No.1 ecommerce platform. It is an open source ecommerce platform developed using the PHP Zend framework. It helps the merchants all over the world to create an ecommerce website and provides a number of shopping cart options.

Over 250,000 websites use the Magento platform till now and the number is increasing everyday.

Why Magento:

Open Source Platform:

Magento is an open source platform, therefore it is easy to just download the core files from magento website and create your online store within minutes. There are also free extensions available to improve the functionalities of your store.

Flexible Backend:

Magento has a good content management system which helps the users to add the content through WYSIWYG editor. Users with no coding knowledge can also use this editor to create content in the website.

Search Engine Friendly:

Magento has an inbuilt Friendly URL structure with which the users can configure their website’s URLs to be more search engine friendly. In addition to this, the titles and descriptions can be configured from individual pages and posts separately.

Huge Store Options:

Unlike WordPress and other platforms, Magento has great features for setting up your store. You can set up multiple stores from the same backend dashboard. You can add ample number of products and categories compared to other platforms. Third party integrations are made easy with magento and this can make your store a more powerful one with multiple options to choose from.

Large Community:

Magento has a large customer and developer base. Therefore it is easy to find solution to any question that you are looking for. To add up, there are many themes and extensions to improve your online store’s appearance and functionality. Apart from this Magento has its own community forum at https://community.magento.com/ to help users discuss various Magento topics.

Magento vs WordPress:

WordPress is a great content management platform but its ecommerce features compared to Magento is limited. Magento has inbuilt ecommerce module while in WordPress, we will need to go for third party extensions like Woocommerce. This makes building online shops with WordPress a little more complicated than Magento.

Content Management with Magento is also easy like wordpress with page and post types. Magento is a stable version unlike wordpress which has frequent core updates. This makes wordpress an unreliable platform as these updates normally would result in some errors. Adding and maintaining huge number of products is very easy compared with wordpress which has drawbacks with memory limit issues as well. So compared to WordPress, Magento is the better Ecommerce Platform.

Top websites using Magento:

Building a basic ecommerce store using Magento:

Installation:

To create a website development with Magento, you need to download the core files from the Magento website. For downloading the files, you will need to create an account and confirm your email address. Once you have completed the above step, you can login to your Magento account and start downloading the files. Please check the PHP and MYSQL version compatibility of your server before you start the download. Magento version 2.1 requires PHP 7.0.4 and MYSQL 5.7.

Earlier versions support PHP 5. Once you have downloaded the files, you can extract the files to any folder in your server or if you are developing the website in localhost, In case of XAMPP, create a new folder in the htdocs directory and extract the files. In case of WAMP, create a new folder in the www directory and extract the files.

After you have copied the files to your server, follow the below installation steps.

Create a database for your site
Open the Magento directory in the browser (The folder where you have copied the magento files. For e.g. http://localhost/magento)

The Magento installer will start running once you have completed the above two steps. You can see the below steps once click on the Agree Terms button. The readiness check will begin testing the system requirements.

If it is successful, you can add your database details, website name and Admin account details in the next steps. Once the above details are set up, the installer will complete the installation process and you are good to go configuring your store.

Installation Issues:

Once you have successfully installed magento, there is a possibility of below issues that may occur for windows users configuring magento in localhost.

Icons not loading in the admin dashboard
Indexers are not indexed properly

To fix the “Icons not loading in the admin dashboard” issue, you will need to follow the below steps

Remove all the files from pub/static folder except .htaccess file.
Edit the app/etc/di.xml file. Search for the “Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink” line and replace to “Magento\Framework\App\View\Asset\MaterializationStrategy\Copy”.

To fix the “Indexers are not indexed properly” issue, you will need to open the Command Prompt in your system, go to the magento directory and run the below command line.

php bin/magentoindexer:reindex

The above steps should resolve the two issues.

Configuration:-

The next step is configuring your theme, pages, posts and products. You will have a basic theme installed in Magento by default. You can change this theme by going to Stores ->Configuration -> Design.

Installing a new theme:

To install a new theme in Magento 2, Follow the below steps.

Unzip the theme package in the root folder of your website
Open the command line in your localhost and type the following commands “php bin/magentosetup:upgrade –keep-generated” (“magento” is the folder name of the website) and “php bin/magentosetup:static-content:deploy”.
Now go to Settings -> Configuration -> Design in your Magento admin panel and change to the new theme that you have installed.

Creating Pages

To add a new page in Magento 2, Follow the below steps.

Go to Content -> Pages -> Add a new page
You can see various tabs Page Information, Content, Design and Meta Tab. You can fill in the required fields and click on Save Page at the top right to create a new page.

Creating Products

To create a new product in Magento 2, Follow the below steps.

Go to Products -> Catalog -> Add Product.
You can see various tabs Product details, Images and Videos, Search engine optimization and Websites. You can fill in the required fields and click on Save at the top right to create a new product.

Setting up currency, shipping and coupon codes

To setup various product attributes like currency, shipping and coupon codes. Click on the Stores tab in the admin panel. You will have multiple tabs with options related to setting up your store.

Payment Integration

To set up payment methods, Go to Stores -> Configuration -> Sales -> Payment Methods. You can see the default magento payment options like Paypal, Braintree, Bank Transfer, etc. To add a new payment method, you should find a suitable extension and install it.

Conclusion:

To create an online store, Magento is the best open source platform available till date and it has many options and stable configurations compared to WordPress.

You should have a basic idea about creating a magento website now. If you find any difficulty with configuring your Magento website, you can always Contact Us for expert advice and queries regarding website development, and we are all ears to hear your stories and requirements.