Author:Digital Marketing

About Digital Marketing

Introduction to GraphQL

Introduction to GraphQLGraphQL is a string query language which is used to retrieve information from server to the client in a specific format. It is a powerful tool for your APIs which enables you to fetch the data from multiple sources in a single query. GraphQL was developed by Facebook. Instead of having multiple endpoints for the API, they decided to come up with a single query which will fetch all the requested details by a client and this led to the creation of GraphQL. GraphQL makes it easy to query and retrieve only those data that are required. It is also possible to read data from multiple data sources in a single query which makes GraphQL a preferred choice for many. For example, you can query data stored in MySQL server and also from Redis at the same point in a single query. Here is an example of GraphQL { user(id: 3500401) { id, name, isViewerFriend, profilePicture(size: 50)  { uri, width, height } } } This is the response from server for the above GraphQL query { "user" : { "id": 3500401, "name": "Jing Chen", "isViewerFriend": true, "profilePicture": { "uri": "http://someurl.cdn/pic.jpg", "width": 50, "height": 50 } } } Key Concepts of GraphQL Hierarchical A large portion of products built today involves creation and management of hierarchical views. To facilitate this structure, GraphQL is also a hierarchical set of views. The string query is structured similar to the data that is requested. This is a simple and easy method for developers to request data from the server. GraphQL Product-centric GraphQL is developed purely considering the requirements of front-end developers and their views. A developer can write the query by describing his exact requirements without worrying about the endpoints. Client-specified queries If you consider any other query language, it is purely based on the structure of data that is stored on the server and not the client request. The client has to write the query based on the existing server data structure using endpoints already mentioned. In GraphQL, queries are encoded purely by the client and not on the server which makes it easy for the client to retrieve only the data that he desires and nothing more. Backwards Compatible We live in a world where millions of native mobile apps are deployed without forced upgrades. Most of the popular apps are regularly updated but there is no guarantee that the client will update. For example, Facebook releases a new update every 2 weeks and offer a minimum 2 years maintenance for the same. So at any given time, there are 52 versions of the Facebook app being used by clients all over the world. Imagine 50+ client versions querying the Facebook server for data? The only way to offer backward compatibility is to ensure client specific queries and keeping the server flexible. Structured, Arbitrary Code: Most of the query languages rely on query storage engine like SQL. On the other hand GraphQL doesn’t rely on any engine, instead queries the server directly with a structure using arbitrary code. This ensures maximum flexibility of data from the server and also enables consistency of API across the platform. Application-Layer Protocol One of the biggest advantages of GraphQL is that it is an Application layer protocol. No separate third-party transport protocol is required. The structure string is parsed and read by the server directly. Strongly-typed GraphQL is a strongly typed language where high-quality client tools can ensure that the query is both syntactically correct and valid. Also Read: Mobile App Frameworks REST vs GraphQL Before the onset of GraphQL, REST was the most widely used architecture for API. Data from the server in a REST system is typically requested using URIs and interfaced with terms. Some of the key REST verbs are HTTP GET, HTTP PUT AND HTTP DELETE. GET is to fetch data from a server in a server-specific format and PUT is used to write data back to the server. All the extra data that is required are fetched using end-points in the REST. Disadvantages of REST
  • To read complex data structures requires multiple round trips between the client and server. This causes unnecessary delay mainly considering that most of the mobile applications operate in variable network speeds.
  • Additional data is fetched by using predefined end-points in REST API. This over time leads to data overload on the client. A REST API with endpoints fetches both the basic data and also the additional data. The client ends up getting what he requires and also the data that is not required. With GraphQL a client can request only the data he requires at that point of time.
  • REST endpoints are weakly-typed whereas GraphQL is a strongly typed one. A weakly typed query results in data which is not readable by machines and thus tooling is not possible. GraphQL, on the other hand, follows correctness and opens the door for tooling.
Continue reading

Continuous integration and continuous development

Continuous integration and continuous development Continuous integration(CI) and continuous development(CD) are integral aspects of Agile software methodology. Agile development is a much better alternative to all the traditional software management practices. Let us look at CI and CD in detail below. Continuous integration This is an agile software process where the developers are required to integrate the code into the main repository during various times of the day. This enables simultaneous updates and reduces the cost of integration by a huge margin. Unlike traditional cycle where the developers have to build the software in total isolation and integrate them only after developing all the modules, CI offers frequent integration during development. The primary objectives of Continuous integration are
  • Reduce the cost of integration.
  • Discover conflicts and bug early and fix them.
  • Fast-tracking development process.
It is not easy to implement continuous integration manually and it requires a high level of automation. The automation includes robust testing and automated build. Continuous development This is a software process where continuous integration is followed by automated testing and automated daily deployment to the production. Any code change is automatically tested for quality and deployed. This ensures that a project is always market-ready. Everything from integration, quality testing, delivery, and deployment are automated for each iteration. Manual intervention is required only at the time of final push to the market. The primary objectives of Continuous development are
  • Product is updated in real-time
  • It is always ready for market
  • Highest quality is maintained via robustly automated test suites
Continuous integration Key Concepts Iterations One of the key concepts of CI is to encourage smaller updates. Developers are required to break complex work into micro modules and commit them as early as possible. Small changes are faster to develop and easy to integrate. When minor updates are integrated it also reduces the probability of errors which will reduce the cost of integration. Even when integrations problems arise, they are diagnosed early and fixed on a daily basis. Some of the significant techniques used are branch by abstraction and form-in progress code updates. Trunk-Based Development The idea behind Trunk-Based Development is to make sure that the development is always in the main branch or integrated back to the main branch in frequent intervals. In some cases, smaller branches are allowed provided they are small changes and integrated back to the main branch early. Except for the main branch, all other permissible branches are short lived. The main objective is to avoid larger changes which might result in errors. For the purpose of release, a dedicated release branch is allowed where no development takes place. Also Read: Ways to secure Docker containers Fast track Build and test Each of the changes is handled by an automated build and test suites to ensure the highest quality is maintained throughout the project. As each and every minor change has to go through build and testing, it is important to automate and streamline the entire process. Increases in both build time and testing time should be considered with serious attention. Various tests can be run simultaneously to minimize testing time. Try to focus more on unit tests and integration testing for quality as they are faster to implement rather than acceptance testing. Consistent Deployment As each change undergoes the same pipeline of tasks like integration, build, testing, etc it is crucial to maintaining consistency throughout the deployment. There should be no change in the sequence of activities, the code should always be built first and should not be changed at any intervals after integration. Automation of building and testing should make use of the same tools and procedures for deploying all the changes.
Continue reading

Importance of Prototype

Importance of Prototype Though wireframes and mockups offer a basic idea about the product, it is the prototype which gives life to your design. Beautiful mockups might look great on the screen but prototypes are required to generate the actual user experience. While skipping a prototype might save you cost and time but you may end up spending a lot more time and money during development. The real significance of a prototype can be summarized using the below factors. Communication and collaboration Even when requirements and ideas are documented carefully it can always be misinterpreted. A working prototype removes all the barriers of communication. A prototype aids in both internal as well as external communication. Internal communication A prototype brings together both developers and designers to work on the same objective to start with. Different departments use different jargons and have different protocols, whereas a prototype has no standard protocols and it brings out the creative part of all the teams involved. Both designers and developers love to work on a prototype phase it is both fun and creative. It increases communication and collaboration among teams. External communication A prototype also helps in third-party communication during presentations to stakeholders. Well defined wireframes and beautifully crafted mockups may at sometimes confuse clients whereas a prototype offers a real-life user experience and removes all grey areas in understanding. A working prototype is a powerful tool for businesses when they pitch the idea to investors. Importance of Prototype Feasibility testing Prototyping is the phase where your ideas are turned into a real-world model. A working prototype can be tested with real people and will reveal all UX challenges. It benefits the designers in the following manners.
  1. Decision making: Some of the important design decisions like ergonomics, shape, function, etc are finalized during the prototype phase. It provides live feedback which will improve your decision making.
  2. Focus: The prototype offers a live experience which focuses more on user experience. When a prototype is tested live in front of the designer, the UX priorities and challenges are made available better.
Usability testing Both wireframes and mockups present a visual clarity to the users but they can’t be tested. This is where prototype comes in which can be tested by real users. When usability testing is done right, you are able to detect problems and fix them early in the design while a saving a lot during development. In order to conduct a good usability testing following basics has to be taken into account. Understand the product: People who are going to test the prototype should know the product well. If they start testing the prototype without a concrete understanding of the product it will lead to invalid results. Selection of test-takers: Each and every product cater to a specific set of target demographics. One should select the right set of the target audience for usability testing. The qualitative test requires a sample of 5 users whereas a quantitative test requires a minimum of 20 users. Types of Usability testing: There are different types of usability tests and different ways to conduct them. One should pick the right tests based on the project budget, time limitations and requirements. Also Read: UX the way to move forward – Importance of UX over the standard UI mindset “Breaking the barriers”  Set your Design Priorities Most of the design experts recommend prototyping early for better results. The static design process can come later in the process but prototyping should start early. There is no need to design a highly crafted prototype instead it can be a basic and low-cost prototype. Always remember that the benefits of prototype outweigh its cost. There are certain limitations and restrictions which could prevent companies from designing a prototype but it is always recommended to do a prototype even if it’s a basic one.
Continue reading

Advantages of CSS Preprocessors

Advantages of CSSPreprocessorsWriting direct CSS on style sheets is good for small web applications, but when you are developing a large user interface which requires heavy style sheets CSS preprocessor is the best solution. CSS preprocessors are special CSS files which contain variables, functions, mixins and other functionalities which are not possible with basic style sheets. They offer an easy solution which enables scalability with efficiency. Now let us look at various advantages of using CSS Preprocessors. 1. Ability to add variables, mixins, functions, etc Basic CSS is direct and offers the least flexibility. The ability to add variables and functions brings a new dimension and scope to CSS which facilitates easier and efficient development. It also makes your code more organized and clean. 2. Join Multiple Files CSS Preprocessors offers a special functionality of joining multiple stylesheets into one. You can create different files for each screen or pages and then import them all in the main CSS file. Now, only the main file needs to be imported on the website and internal files will be read from the server. 3. Avoid Repetitions One of the biggest drawbacks of basic CSS is that you need to write everything multiple times for each object. This is totally against the principle of programming languages. This is where CSS Preprocessors are a time saver. You can write common styles once that can be imported instead of re-writing. Here is an example. Basic CSS

 .maindiv{ Margin:5px; Padding:2px; border:1px double; } .subdiv1{ Margin:5px; Padding:2px; border:2px double; } .subdiv2{ Margin:5px; Padding:2px; border:3px double; }

Now the same code using a CSS Preprocessor .maindiv{ Margin:5px; Padding:2px; border:1px double; } .subdiv1{ .maindiv; border:2px; } .subdiv2{ .maindiv; Border:3px; } As you can see, instead of re-writing the same code thrice, we are just calling the main style and adding new changes. This will save you a lot of time and space. 4. Nested Syntax Nesting of classes in CSS makes it easy to target DOM elements and saves you time. Nesting also makes it tremendously easy to edit CSS files. Here is an example of nested CSS. body { .header { h1 { font-size: 28px; }   h2 { font-size: 21px; }   } } This will translate into the following CSS body .header h1 { font-size: 28px; } body .header h2 { font-size: 21px; } Now if you want to change the class name “header” to something else, it has to be done only once. The same in basic CSS would require changes in multiple places. Also Read: Responsive Testing Tools 5. Less Time to Code You can avoid repetitions while using CSS preprocessors and also it makes your code more organized. The combination of these two will save you a lot of time in coding. You will be able to write the same amount of styles in a much lesser time which will be easier to scale too. 6. Darken & Lighten functionality CSS Preprocessor has many built in functions and one among them is Darken and Lighten functions. You can just mention darken with the color code and also the percentage. This was not possible with basic CSS. Here is an example h1 { color: rgb(230, 140, 230); // color: #e68ce6; color: darken(#123456, 10%); // color: #091a2c; color: fade(#123456, 50%); // color: rgba(18, 52, 86, 0.5); } Now that we have understood the benefits of CSS preprocessors, let us look at some of the most popular ones available today. SaSS SaSS is an 8-year-old open source CSS project which is the most used CSS preprocessor today. If offers 2 different syntaxes to write the CSS namely, Sass or SCSS. Sass requires Ruby to compile. Less.js It is easily the best competitor for Sass and it runs on Node. Getting started with Less is quite easy, just download the Less.js JavaScript file and integrate with your HTML or use a public CDN for importing. With Less, one can use variables, mixins, functions, etc and it also offers a unique way to use looping. Some of the other popular CSS Preprocessors are Stylus, CSS-Crush, Myth and Rework.
Continue reading

What are Chat bots and how to build one?

chatbots Chatbots are applications which chat with real visitors based on some predefined rules and algorithms. They are mainly used for marketing and sales assistance. There are primarily two types of chat bots namely 1. Rule Based Chat bots These are normal chat bots which are in existence for quite some time now. These are used by many companies even for text messaging. In this case, the developer creates a set of predefined terms and rules which on inputted will result in respective actions. One simple example of rule based chat bots is the prepaid balance checking using text messages provided by your mobile service provider. You just enter a specific text [command] and text to the number. The chat bot on the server end on receiving the message extracts the command and execute it. Example: Bal 9xxxx9xxxx 2. Artificial Intelligence chat bots These are sophisticated chat bots that are built for messaging apps like Facebook Messenger, Slack, etc. Here the humans can interact with the chat bots using their normal language. Using artificial intelligence chat bots will decode your message and reply accordingly. Here the input message is decoded into structured data and broken down into commands. Who needs Chat bots? Chat bots are essential for any business that is online today. Chat bots can be used for the following purposes. 1. Pre-Sales Chat bots in an e-commerce 2. Shopping assistant 3. Information Assistant: weather, news, doubts, etc 4. Product/service explainer chat bots. 5. Helps in getting payments. Why are chat bots becoming famous? Messaging apps be it WhatsApp, Slack, Facebook messenger, etc, are becoming famous day by day. More and more messaging apps will be coming out in the near future. Chat bots are a fantastic way to convert these messaging apps into a sales channel. Also read: The Reality of Augmented Reality Surveys reveal that more and more people prefer to chat with a business to complete a transaction compared to buying it themselves through a website or application. Users tend to get clarity when they chat with a business and it also creates trust and confidence. When a person is looking to book a resort, he would prefer to chat with the business and ask some questions like whether breakfast is complimentary? What is the check-in time? Are pets allowed? etc. When a business replies to these queries via chat it increases trust and leads to a sale. Chat bots are also essential for having user engagement and act as customer support service. Which Platforms are suitable? Facebook Messenger Skype Email Slack Amazon Echo LINE Telegram Twitter Viber Websites WeChat Android iOS How to build Chat bots? There are many platforms where you can create chat bots within minutes without coding. You can visually design, build, test and deploy chat bots using these platforms and some of them are even free. Here are a few platforms which you can use Chatfuel motion.ai api.ai Botsify Flow Xo Bottr There are many platforms out there which will help you to create bots and use it for your business. If you are thinking about building a highly complex and a professional chat bot for your business, then do contact Techaffinity.
Continue reading

Laravel - Trending framework for web application development

Laravel trending framework When it comes to developing fast, secure and reliable web applications, Laravel is the most preferred choice today. Laravel is the fastest growing open source PHP framework today which follows MVC architecture. There are many reasons for this huge success of Laravel and we are going to discuss some of them in detail below. 1. Built-in Authorization & Authentication Laravel provides both authorization and authentication services out of the box. Laravel offers Authorization actions through gates and policies. Gates are similar to routes which determine whether a user is authorized to carry out an action or not. Policies are similar to controllers which define the set of authorization logic on a particular model. It is defined using make:policy command.

php artisan make:policy PostPolicy

You can locate the Authentication logic in the file config/auth.php. This is defined using guards and providers. 2. Artisan Artisan is one of the biggest reasons why developers prefer Laravel over other PHP frameworks. It is a command line interface provided by Laravel with which you can interact with your application using commands. Artisan comes with a big list of built-in commands with which you can build the application. To view the list of commands available just type

php artisan list

As a developer, you can also create your own commands in Artisan using the make:command as shown below.

php artisan make:command commandname

3. ORM Database management is core to all kinds of applications. Laravel makes it extremely easy to manage database operations using the built-in Eloquent ORM. It is one of the simplest query builder for reading and writing information in the database. Each table is associated with a corresponding model that is used to access the table. 4. MVC Architecture Laravel is built on a well defined MVC architecture which is what makes it easy to learn even for amateurs. MVC architecture results in a highly efficient code and also makes it easy for documentation. Laravel strictly Implements MVC using Model, views and controllers. 5. Migrations Migrations offer version control for your databases in Laravel. This makes it easier to modify database schema by various team members. Migrations also contain the time stamp which makes it easy to determine when the changes are made. This is achieved using the make:migrations command

php artisan make:migration create_users_table

6. Blade template engine Laravel’s blade is by far the easiest template engine among all PHP frameworks. Unlike most of the frameworks, Blade offers you to use HTML to along with PHP for views. There are separate widgets available for coding JavaScript and CSS. 7. Highly Secured One of the important aspects of a good framework is the security it provides. This is where Laravel outranks most of its peers. Laravel never store passwords as plain text in the database, instead, it uses a hashed password. 8. Easy to learn tutorials: Laracasts Laracasts is a video tutorial website which offers screencasts on various web technologies like PHP, Laravel, CSS, JS, etc The Laravel screencasts on this platform are very well documented and is easy to learn. Presence and growth of Laracast is helping 1000s of developers to learn and master Laravel. 9. Cloud Platform Support Laravel is supported by many cloud platforms like Google app engine, Digital Ocean, Linode, Amazon AWS, etc. Laravel also offers seamless cloud server provisioning and deployment using their product called Forge. We have covered some of the factors which is making Laravel the most preferred choice for application development today.
Continue reading

React Native vs Nativescript

React Native vs NativescriptThere are numerous frameworks available for building hybrid mobile applications where you can write once and the app can run on both Android and iOS. The biggest drawback of the hybrid frameworks is that they use web view for rendering and cannot access native components. This is where React Native and Nativescript offer a better solution where you can write once and run across platforms also accessing native components. We will be discussing in detail about various pros and cons of both the frameworks which will guide you in selecting the aptest one. Technology React Native uses React JS for developing cross platform apps. If you are new to React, then you might find it difficult to get started. React JS is one of the fastest growing JavaScript frameworks which uses JSX for rendering. The native script has got the option to select between Angular, Typescript or Javascript. So if you are familiar either with JavaScript or with Angular, it is easy to get started. This is one reason why Nativescript appeals to a wide range of audience. Objective The primary objective of React Native is to "Learn once, write anywhere". The core goal of React is to build platform oriented UI. While most of the code can be reused across platforms, React will allow you to build and render unique UI for each platform. The primary objective of Nativescript is "Write once, use anywhere". Nativescript follows a holistic approach and you just need to write once and it will be running smoothly across all 3 platforms. This is where Nativescript clearly wins the race against React native. Performance React Native provides the closest Native experience and also with native rendering offers super fast experience. Nativescript again offers native rendering, since it uses Angular for rendering, it will be a relatively slower than React native. Third Party Libraries React Native created and supported by Facebook has matured a lot recently. Many of the third party applications have started providing API for React Native. More and more platforms are releasing new plugins for React native daily. Nativescript also has a decent number of third party plugins but doesn't match up to the count of React Native. Also, the plugins are not 100% verified. Community React Native has a huge open source community compared to Nativescript. Be if GitHub or StackExchange React native easily outscores Nativescript. Here is a simple comparison GitHub React Native: 50K+ stars and 12K+ Forks NativeScript: 10K+ Starts and 850 Forks. Conclusion If you want to develop a truly cross platform app with a single code, then NativeScript is your first choice. If you want to create a more platform dedicated app with complex functionalities at high speeds, then React Native is the winner. You do need to re-write the UI for each platform with React Native. One more thing to consider is the size of the final application. Apps created using Nativescript has a higher size compared to React native. If you are developing apps to an audience who has a slower network connection, React is your answer.
Continue reading

Ways to secure Docker containers

secure docker Most businesses worldwide today choose the path of containers for deployment of services and servers. One of the most widely used tools for containers is Docker. Docker provides a few security features by default but in some cases, the default security alone is not sufficient. We will be looking at various ways Docker containers can be secured. 1.  -u flags Make sure that you start Docker containers with the –u flags. This will ensure that the container will run as a normal user and not the root. 2. Docker Hub Paid Plan: Since you are using third party containers for your Docker, they might contain malicious code or they are not well secured. To solve this issue, one option is to go for Docker Hub paid plan. This option ensures that the repositories are scanned and are well secured. You opt to choose only officially recognized containers which are pre-scanned and well secured. For example, to deploy a WordPress container you need to provide the below command

sudo docker search WordPress

You will see a lot of entries of various third party WordPress containers which are available for deployment. The very first entry will be Bitnami Wordpress. You will be able to see “ok” tag under the official column.

3. Remove SUID flags: As discussed earlier the very first step is to start Docker with the –u tag. This itself is not enough to prevent all the attacks. Some of the container image files are by default have the SUID flags set. SUID is a special file permission which allows ownership during execution. You should either unset these tags or complete delete those files. This will prevent escalation attacks. To unset SUID please use the below command.

RUN for i in `find / -perm +6000 -type f`; do chmod a-s $i; done

4. Docker Content Trust:

Docker comes with a security feature called as "Docker Container Trust". This will ensure that only those container images which are verified and authenticated will be allowed to use. Unfortunately, this is not enabled by default in Docker.  To enable this use the following command

sudo export DOCKER_CONTENT_TRUST=1.

5. Restrict Resources for your containers

Containers, when infected or attacked, might end up consuming a lot of resources like memory and CPU. This can be prevented by setting limits on the resources each container can consume. This is achieved by using the following commands. To set memory limit:

—memory="1000M"

To restrict CPU usage

—cpus=X

where X is the number of CPUs made available for this container

6. Use Namespaces A namespace is a simple option to secure containers. When enabled, it will make sure that the process running in one container cannot affect other containers. This container isolation is a good approach to secure other containers. 7. Docker Bench Security This is a handy script which will scan your Docker containers for various aspect and reports the results on which you can act upon. Here are some of the tests that can be performed by Docker bench security like the host configuration, Docker daemon configuration, container images, container runtime, etc. You can download the Docker bench script from Git clone using the command below.

git clone https://github.com/docker/docker-bench-security.git

To run the script,

sudo sh docker-bench-security.sh

The result of this command will check your Docker for various security aspects a detailed report will be displayed which will show which of tests are passed and which ones have warnings.

Continue reading

How to optimize Magento’s performance - Part 1

magento speed The name Magento is asynonym to e-commerce websites. It is the most widely used e-commerce platform ever. According to a report, around 22% of the top 100,000 e-commerce sites use either Magento or Magento Enterprise. This open source platform is owned by Ebay. One of the most frequently faced problems with Magento or any other e-commerce sites is the speed. As more and more products are added, the database and the site become slow. We will be looking at various ways to optimize Magento website and increase its speed. We already made 2 detailed guide on how to create a fast loading website. You can read them at Part 1 and Part 2. 1. Stay Updated Magento is one of the most comprehensive platforms which get regularly updated. Updates are released for bug fixes, security updates and also performance improvements. Magento as a platform contains many modules and it might become slow over time. Magento collects regular feedback and optimizes speed issues of these components and releases regular updates. You can get regular notification of updates available in your dashboard. Unlike Woocommerce or Shopify, updating Magento is not straight forward. Follow the below steps to update Magento.
  • Take a fresh backup of both your files and database before upgrading. If anything goes wrong, you can restore the old version using this backup.
  • Chose a quiet time when there will be least or no activity on the platform for updating.
  • Download the latest version of Magento. Start the setup routine and when Magento asks for the access data of your database, use the old database. Magento will automatically upgrade your database to the newer one.
  • Transfer the themes and plugins from the old version to the latest version. Copy your media folder to use all images of products and categories and wysiwyg. Re-Index and enable the cache.
2. Implement a CDN Content Delivery Network(CDN) is one of the easiest ways to improve the load speed of a Magento websites. The basic idea is to load your primary assets like images, JavaScript and Stylesheets in a Cloud server in a location which is near to your user’s location. Whenever a user opens your website, these assets will be delivered using the CDN which is much closer to him compared to your server. This will reduce the load speed a lot thus enhancing the user experience. If your end users are spread across theglobe, then you might need to use multiple CDN locations to speed up the process. This can be implemented by using KeyCDN or Amazon Cloud Front. Both the providers have Magento extensions. 3. Enable Caching Caching is one of the common practice to increase the site load speed for all types of websites. When a website is rendered by a client browser all the resources including the HTML file, images, JavaScripts, Stylesheets are downloaded. If thecache is implemented correctly these resources will be resued from the local machine instead of fetching them from theserver for subsequent visits.  Caching can be enabled in Magento using the below methods. One of the most frequently used methods of caching is by combining NGINX + APC + Memcache + Varnish caching.  Magento also comes in with a built-in cache management where you can enable or disable various method of caching. Just login to your Magento admin panel and click System-Cache Management. The second method of caching is by using the browser caching which is implemented using the .htaccess file. Browser caching is implemented using the Expire headers. This will tell the browser whether to fetch the site from the server of reuse the previously downloaded files. You can also compress your resources and webpage at the server end before sending it across to the browser. This will also reduce the load time for the end user. This can be achieved using Gzip compression. Another method of caching is Page Caching where complete webpages are rendered using the existing cache instead of querying the server. This can be achieved using one of the below plugins.
  • Zoom Full-Page Cache
  • Full Page Cache Pro
  • Brim’s Full Page Cache
We will be discussing more methods in details to optimize your Magento website in the next version of this article.
Continue reading

How to Create a Fast Loading Website – Part – 2

fast loading website 2This is a continuation of our previous article titled “How to Create a Fast Loading Website – Part - 1”. In the previous edition, we spoke about Mobile First design, Benchmarking testing, Preloaders and reducing the number of HTTP requests. In this edition, we will be discussing more tips which will optimize the performance of your website and make it load faster. 1. Enable Caching wherever possible HTTP caching is a process which will reduce the load time of a website by more than 50% for repeat users. When a user visits your website, the browser will download all the files of the website including HTML, images, Stylesheet, JavaScript, etc and store them in a temporary cache. When the same user visits the website for the second time, the browser will extract the information from the local cache before contacting the website. This will decrease the load time a lot and improve the user experience. Caching can be implemented efficiently using the following techniques
  • Last Modified
  • ETag
  • Expires
  • Max-Age
  • Cache-Control
2. Optimize Images A Photo is worth a thousand words; this is why images are the most important aspect of a web page. Images should be high resolution and crisp for users. High-resolution images are mostly large images. By large images, we mean images with a bigger file size. A large image takes a longer time to load and hence slows down a website. This further creates a bad user experience. We need to optimize and reduce the file size of images without compromising the quality. This can be achieved using the following methods.
  1. Use the optimal dimensions: When you are designing for a mobile device, don’t use an image with a width of 1000px, instead reduce the width to mobile screen width. This will reduce the file size and also the load time.
  2. Save Images for The Web: When you are creating the images using Adobe Photoshop make sure to save them using the “Save for The Web” feature in the File Menu. This will eliminate unnecessary EXIF details in the photo and reduce the file size.
  3. Chose the Right File Type: JPGs are the most commonly use file format for the web and has got the least file size. Try to use this for most websites including E-Commerce websites. If you need transparency you need to save them as PNG format. GIFs are to be used only for smaller images and less frequently.
  4. Use an Image Compressor: Once you save the images using Adobe Photoshop the file size can further be reduced using compression tools. Here are a few popular ones.
    • TinyPNG
    • Compressor.io
    • Kraken
    • ImageOptimizer
    • ImageOptim
3. Reduce the usage of external scripts JavaScipts are an essential part of any web page these days. You can’t eliminate JavaScript entirely from your website instead we can optimize how it’s been used. Here are some tips
  1. Combine JavaScript: If you have a more than one JavaScript files in your server, try to combine them into a single file. This will reduce the load time by a small margin.
  2. Install instead of Importing: It is a common practice to use third party JavaScript libraries on your website. Some of the most commonly used ones are jQuery, Bootstrap, etc. Instead of importing them using their CDN you can install them on your server. This will limit the number of outgoing requests which will reduce the load time. You can either copy and paste the JavaScript libraries or use a package manager like NPM to install them locally.
  3. Async Tag: All the JavaScript files will block your HTML rendering. If you use the Async tag, it will allow the script to load simultaneously as the web page loads.
  4. Defer Attribute: This will enable that the JavaScript is loading only after the web page is loaded.
  5. Don’t use JavaScript in the header.
These are some of the tips which will highly optimize your website and make them load much faster.
Continue reading

How to Create a Fast Loading Website – Part - 1

fast loading website 1 The loading speed of the website is one of the most important factors which decide user conversions. Bringing a user to the website is not an easy task but then to scare him away with a slow website is a sin. The idea is to develop a fast loading website without compromising on the quality and content. Now let us look at various measures to improve the performance of your website. Do Mobile First Around 85% of internet users in the USA are mobile users. They use their smartphones to access your website. That being the case, why develop and optimize a website for desktop first. Instead, design and develop your website for mobile first. Forget using media queries now and focus on the mobile screen size. Your design should be fully focused on mobile screen size and capabilities. People use their 3G/4G network to access websites in their mobile and so a low bandwidth site will do the trick here. Use images of lower dimensions for mobile first design. Once fully developed, you can use media queries to customize the website for laptops. Use a Benchmarking testing for speed optimization Once you are done with the website development and testing the next important thing to do is optimization testing. There are 100s of tools available online for testing the performance of your website. One such useful tool is Google Lighthouse. This is a Chrome plugin with which you can test your website for various scenarios and devices. It gives out a detailed report and optimization tips on your web design. Another user interface tool provided by Google is the PageSpeed Insights. You just have to input your URL and it will analyze the site and provided speed ranking and suggestions for improvement. Get addicted to these tools and try to get a good score to improve the load speed of the website. Use a Preloader No one likes to see images buffering at the time of using the website. You might have used an image to be shown on a mouse-house event. The image will be fetched only at that moment and it will cause a delay and a bad user experience. You can avoid this by preloading images and create a smoothly animated preloader for a better user experience. Another important rule to follow is to have Javascript at the footer of your site. Importing Javascript from external libraries is a common practice and it should not block the rendering of the HTML. If required you can also prefetch the javascript upfront. Once the Javascript is preloaded all further calls to it won’t go out to the network thus saving a lot delay. Reduce the Number of HTTP Requests According to KISSmetrics, 47% of the users expect a website to load fully within 2 seconds. This can only be achieved if you minimize the number of outgoing HTTP requests. The browser needs to download a different kind of files like HTML, Javascript, stylesheets, images, etc. To start with you need to understand how many HTTP requests your site makes. You can find this using the Google Chrome’s Network Panel. It will list out all the files that are downloaded for each visit.  Things to do to minimize HTTP requests are
  • Remove unnecessary images
  • Make JavaScript asynchronous
  • Combine CSS files
These are some of the basic things you should do to reduce the load speed of your website. We will be discussing more optimization tips in the second version of this article.  
Continue reading

7 JavaScript Layout Libraries for creating dashboards

layoutib The dashboard is the most important aspect of any backend application. It is a great tool to represent the complete app in one layout. It simplifies navigation and provides easy access to the user. Some of the basic modules of a dashboard are Charts, graphics, tables, etc. There are many libraries available to create dashboard both paid and free, now let us look at the best 7. Gridster.js This is a jQuery plugin that enables constructing widgets for dashboards easily. The layouts constructed using Gridster is draggable for the users. Users can drag and drop the widgets across multiple columns with ease. To start with you need to include the jQuery at the top of your document. Once created, you can then dynamically add/edit/delete widgets from the grid using jQuery. You can also create a JavaScript array of all widget as an array object and then use them later as JSON string. The function used is gridster.serialize(); Angular-Gridster This is similar to Gridster except this is a completely re-written version of Angular JS. Since this is written in angular js, it has some additional features and better data binding through Angular. You just need to include the Angular-Gridster JS and CSS at the top before starting. This allows resizing of the widgets, swapping of same size widgets, disabling pushing, etc. This also supports Gridster events and two-way data binding. Gridstack.Js This is another jQuery plugin for creating drag and drop widget based layouts. You can drag and drop widgets from one column to another with ease. This is also made responsive with Bootstrap V3. It also works great on knockout.js and other touch-based devices. jQuery Gridly This is a jQuery plugin to create grids with elements which can be dragged and dropped. You can do the following.
  • Drag and Drop
  • Swap
  • Delete
  • Resize
You can import Gridly like any other jQuery plugin, just include the javascript and stylesheet directories in your page at the top. This can also be installed using Bower. This plugin is compatible with Ruby of Rails. This is registered as an asset in Rail-assets.org. You can just import the rail asset using the below code. + gem 'rails-assets-gridly' Packery This is another Javascript library that helps you to create gapless layouts which are draggable. To fill the gaps this plugin uses an algorithm called as bin-packing. You can start using the plugin by importing the javascript file from their CDN in the header. This can also be installed using Bower or NPM. This is available both as anopen source and commercial license. If you are developing a commercial website using packery then it is better to buy their commercial license which starts from $25. This plugin can be used to create Masonry Image galleries and also e-commerce sites. GridList This is a Drag and drop javascript library for creating 2-dimensional layouts. The layout built using GridList is completely responsive and uses DOM elements. This is a much improved and better alternative for Gridster. Users can also dynamically increase and decrease the size of the grids. This also handles collision much better with a smoother UI. Dazzle This is a Javascript library for building dashboards in ReactJS. Some of important features of Dazzle are
  • Grid based Layout
  • Add/Delete widgets
  • Draggable widget re-ordering
  • UI Framework agnostic
  • Well Documented
Continue reading

Adobe Photoshop CC - Important Features for UI Design – Part 2

adobe part 2This is the second part of our previously written article about Adobe Photoshop CC. You can read that article here. We have already discussed Artboards, library, Generate Assets and Touch Bar Support in the previous write-up. Here we will be looking at other important UI features in Adobe Photoshop CC like
  • Device Preview
  • Adobe Stock
  • Adobe Typekit
Device Preview This is a cool feature in Photoshop CC which makes the life of UI designer simpler. Now you can live preview your designs in Photoshop on multiple Apple devices. There is an IOS app called Adobe Device Preview where you can see the live changes from your Photoshop artboards. These IOS devices can be connected either using a USB port or using Wi-Fi. To see live preview using Wi-Fi you need to be connected with Creative Cloud both in Photoshop and in Preview CC. Make sure both the devices are connected to the same Wi-Fi network. You can see the list of available devices in Device Preview tool in Photoshop CC, select your device and the app will render the live preview. Device preview works both on iPhone and iPads which are running on iOS8 and above. Adobe Stock This is a service by Adobe where designers and businesses worldwide can access over 45 millions images, videos and vectors. These images are not only royalty-free but also are of the highest quality. You can access them directly in the library of Adobe Photoshop CC. You can search for the image using the Creative Cloud library and drag the image of your choice to the project. When you are satisfied with the image, then you can license it. By default, they come with Adobe Stock watermark. You can also resize and add effects to the image before deciding to license it. You can license it directly from inside the library and no need to go their website. This increases the productivity of designers saving them valuable time. You can either pay per license or you can opt for a subscription model that suits your requirements. Adobe Stock has got 4 subscriptions right now. They are
  • 3 Standard Assets per month @ 30USD
  • 10 Standard Assets per month @ 50USD
  • 40 Standard Assets per month @ 80USD
  • 750 Standard Assets per month @ 200USD
Adobe Typekit This is a subscription service by Adobe which provides 2400+ fonts to choose from. You can sync these fonts to your local computer and use with Adobe Photoshop CC or you can also use them for your websites. To start using them you should be a member of Creative Cloud, if not you need register in Typekit separately. Once logged in you can surf through 1000’s of fonts and select the one which you prefer. On the Font page, click on the sync button. This will download and install the font on your local machine. To use it for websites you need to add them to a kit. Once done they will provide you with a javascript embed code. You can make necessary customizations before buying the font. They have both free and paid fonts.
Continue reading

Responsive Testing Tools

Responsivetools Web designing as an industry has evolved over the years and has adapted to all the technological changes happening worldwide. Initially, websites were viewed only on a desktop computer and then came the laptops. In the last 2 decades countries have embraced the idea of mobility with open arms. Now in most of the developing and developed countries majority of the population are accessing websites using their Smartphone. Web sites which were originally designed for the dimension of a desktop screen were not user-friendly on a small mobile screen. This led to the need for a responsive design. When a website is responsive, it adapts or changes based on the screen size it is being accessed from. The layout of a responsive website looks completely different on a laptop compared to a mobile. Basically, there are 4 different screen sizes that are being defined in the responsive design analogy. They are
  • Large screen desktops
  • Medium-Screen Laptops
  • Tablets/iPads
  • Smartphones
One can define each screen size and vary the design layout accordingly. The same website, when viewed on different devices, will render the content in a layout that is suitable for that device screen. Mattkersley This is a simple website where you can input your website URL and it will be rendered on all device sizes simultaneously for your review. This also includes iPad-Landscape. Responsive Design Checker This website provides you output in 10 different device sizes at the same time. This is extremely useful and also support 11-inch Macbook Air. Responsinator This is another cool tool to test the responsiveness of your website on a mobile device. It provides output in various small screen devices size both portrait and landscape modes. Responsive Design This site has got a bookmarklet tool for your web browser. Once installed, you can test the responsiveness of any website just by clicking the bookmarks. Another useful feature of this tool is to test the responsiveness of local websites and take screenshots of them during the development process. BrowserStack This is a mobile emulator tool where you can preview and take screenshots of your website on all popular mobile device brands. Since they support each brand and model, it gives you a more accurate output. Screenfly You can test the output of your responsive website on all device sizes including that of a television and take screenshots. Responsive Test You can just enter your website URL and test the output in all screen sizes. In addition to that, you can also enter your dimension manually test the website display. Viewport Resizer This is a bookmark tool which lets you test the responsiveness of any website while you are surfing. You can use media queries to generate specific output sizes. Blisk This is more of a tool which you need to download to test the responsiveness. This tool is significant because it works offline and supports most of the development IDEs. You can check for responsiveness at the time of development and also at the time of debugging. You can also take screenshots and record your screen as a video. Listed above are some of the tools for testing the responsiveness of your website on various device sizes.
Continue reading

Adobe Photoshop CC - Important Features for UI Design – Part I

Adobe Photoshopcc Adobe Photoshop which has been the go-to tool for designers worldwide for more than a decade, started supporting User Interface design in recent version. Adobe Photoshop CC has come out with many features with which one can create UI both for the web and mobile apps. It also supports HTML5 and open source. Now let us look at some of the tools and features in Photoshop CC which assists in UI design. Artboards Artboards are especially useful for designing mobile apps and responsive design. You can design for multiple screen sizes and see the preview at the same time for all devices in a single document. You can have multiple design layouts in one document using artboards. To create a new artboard, just create a new document control+N -> then select the document type as artboard. You can select any one of the many preset device sizes. You can alter a number of artboard properties. Just select the particular artboard in the layers panel and click on properties. You can change the following
  • Artboard size
  • Orientation
  • Alignment
You can also manually resize the artboard using the drag and scale. Consider you have designed the artboard for an iPhone, you can easily replicate the same for an iPad. Just duplicate the artboard layer and select properties and change size. Library Now you can store your frequently used layers in Photoshop libraries and access them easily both locally and also in the cloud. CC Libraries is a web service that allows you to access your assets anytime anywhere. You can also use your assets stored in the library in Illustrator. You can also store other aspects like layer groups, text styles, layer styles and colors. You can also view these libraries on a web browser instead of opening in photoshop. To do this, just click on the fly-out menu in the library and select “View on Website”. Generate Assets Now you can save each and every layer in your photoshop as a separate image asset. All you have to do is to append your layer name with an appropriate image extension. Currently, supported extensions are .PNG, .JPEG, .SVG and .GIF. You also have the facility to mention the image quality and size for the newly generated assets. Generating image assets is particularly useful for Mobile Apps. To generate assets, just click File->Generate->Image Assets Then append the extensions to the layers or layer groups. The newly generated assets are stored in a subfolder along with the source PSD file. If the source PSD file is yet to be saved, assets are saved in a new folder on your desktop. Touch Bar Support If you are MacBook Pro user then you are aware of the new cool Touch Bar. Adobe Photoshop now supports multi-touch display bar in MacBook Pro. You can access any one of the below 3 things in the touch bar for photoshop.
  • Layer Properties: This is the default option and it allows you to modify layer properties easily.
  • Brushes: You can work with the brush and paint properties of Photoshop
  • Favorites: You can customize this area and add your favorite tool.
You can access any one of the top 3 mentioned modes in touch bar. Each mode supports various inner level functionalities too. It also provides other context-sensitive operation based on what you are currently doing and which tool you are using.
Continue reading

Mobile App Frameworks

mobileapps Android and iOS applications development is no longer considered to be native programming. You can start developing apps using your knowledge of HTML, CSS and Javascript. One of the big advantages of using web technologies to develop mobile applications is that they can support many platforms and no need to code it separately. You can write singular code and declare it for both iOS and also Android. Now let us look at some of the popular mobile app frameworks available now. IONIC IONIC is easily the most commonly used HTML 5 web framework for developing hybrid mobile apps. It is a powerful front-end framework for developing hybrid apps built using SASS. Mobile Angular UI You can develop beautiful looking HTML 5 mobile apps using bootstrap 3 and Angular JS. It is a mobile UI framework similar to jQuery Mobile but no dependencies to jQuery and built using Angular JS directives. Intel XDK It is a simple and easy to use app development framework provided by Intel. It provides a simple interface where you can construct apps using drag and drop modules. Their tool is available for free download on Linux, Windows and Mac. It has got many built-in templates which can be used to design and develop apps. It also provides support for many popular UI frameworks like Twitter Bootstrap, jQuery Mobile and Topcoat. At the time of development, you can connect your device and see a live preview of the app at the same time. Appcelerator Titanium It is one of the completely open source mobile application framework which provides an easy platform for developing native apps. You can write the code in Javascript and deploy the app across platforms easily. It has a drag and drop app designer with which you can create APP UI in minutes. You can see the live preview of the UI that is being created and provides bi-directional updates between code and design. The same app can be used for various platforms for Android, iOS and Windows. It also comes with Cloud service which can be used as App backend. Sencha Touch It is another HTML 5 web framework for developing cross-platform mobile apps. You can use Javascript to create hybrid apps which look similar to native apps. The app can be deployed on platforms like iOS, Android and Blackberry. Kendo UI Kendo UI uses jQuery for developing hybrid mobile and web apps. If you are familiar with jQuery then getting started with Kendo UI is really easy. Kendo UI has also support for Angular now. Unlike other frameworks Kendo UI is not free as it depends on many jQuery widgets which are commercially licensed. PhoneGap This is a platform to packaging and releasing the app directly. It uses open source Cordova which is an Adobe product. PhoneGap compiles and release the app directly in the cloud which can be used as the backend. React Native Unlike other app frameworks, React Native is a web framework to develop native android and iOS apps. It uses javascript and React to design and develop apps.
Platform Languages License Target
IONIC iOS,Android HTML, CSS, JS Free Hybrid
Mobile Angular UI iOS,Android Angular JS, Bootstrap 3 Free Hybrid
Appcelerator Titanium iOS,Android HTML, CSS, JS, PHP Free Native
Kendo UI iOS,Android Windows,Blackberry PHP, Java, Ruby, C#, HTML, CSS, JS Commercial Hybrid Web
PhoneGap iOS,Android,Windows, Blackberry,Watch OS, Firefox OS HTML,CSS,JS Free Hybrid
Continue reading

How to add Google SignIn using Android Firebase

Google SignIn Firebase is a Google-owned platform for developing both Mobile and Web applications. It provides the necessary tools and infrastructure for developers to create apps. The list of services provided by Firebase are:
  • Analytics
  • Could Messaging
  • Authentication
  • Real-time Database
  • Storage
  • Hosting
  • Test lab for Android
  • Crash Reporting
We will be looking Authentication service using which we will be creating Google Signin for our apps. Now a day’s most of the apps required login functionality and most preferred login method is Social Login. Login with Facebook, Login with Google, etc. We will be setting up Login with Google using Firebase Google Signin. Firebase Module
  1. Visit Firebase website https://firebase.google.com/ and create a free developer account.https://firebase.google.com/ and create a free developer account.
  2. Create a New Project to get started. Please provide a suitable name for your project and also select your country and go to next step.
  3. In the subsequent screen, select “Add Firebase to your android app”. Add your package details along with Debug Signing Certificate SHA-1 key. To add Google Login, integrating your SHA-1 key is compulsory.
  4. Now a file named “google-services.json” will be downloaded. Save it to your local system, we need to add this to your Android app later.
  5. We have created a Firebase project and integrated our app via package name, the next step is to enable Google login in Firebase.
  6. Click on the Auth Menu -> SIGN-IN METHOD. In this screen, select Google and enable the same.
We have created a free account, added a project and integrated it with our app package name and enabled Google Login. Now we need to create our android app and add Firebase project to it. Android Module
  1. Create a new project in Android Studio and select default activity and proceed.
  2. In the project details section, enter the same name as the one you used in Firebase for the package name.
  3. For Google Signin to work, your app needs to access the internet. To give internet permission to your app, open AndroidManifest.XML file and add the following line “<uses-permission android:name="android.permission.INTERNET" />”
  4. Now we need to add the google-services.JSON file which was downloaded from Firebase project to our app. Just copy and paste the file to your Android Studio’s Project app folder.
  5. The next step is to add Firebase dependency to your app. Just open build.gradle file and add the following lines
classpath 'com.google.gms:google-services:3.0.0' apply plugin: 'com.google.gms.google-services' To summarize these are the list of steps required.
  1. Create free account in Firebase and create a new project
  2. Add Package name for linking purpose
  3. Enable Google Login and downloaded google-services.JSON file
  4. Create a new android project in Android Studio using the same package name
  5. Add the google-services.JSON file to the project app folder.
  6. Add necessary permissions and dependencies to your project in build.gradle.
  7. Now both the Firebase Google Module and the android app are ready and linked. Now you need to write the code to call Firebase APIs and accept Google Login in your app
  8. You can do both google login and also create new accounts using Firebase Google login.
This is an out-of-the-box option provided by Firebase which can be used by developers to easily enable Google Login for their app users.
Continue reading

Identifying the Right Design Pattern

Identifying the Right Design patterns When it comes to designing the UI for the application, one can either follow any one of the already available design patterns or create something on their own. Design Patterns are probable solutions for some of the common UI design problems. They are not a template or feature that you can just add to the app instead, they are just a set of guidelines that defines how to solve the problem. Designers face some recurring problems while designing an app or a website like navigational structure, color schemes, typography, etc. Let’s assume that you are given the responsibility to develop a mobile friendly website’s navigation menu. There are various ways a menu can be represented in a mobile, but the most common solution is to use a toggle. This is an example of a design pattern. Now let’s look into some of the effective UI design patterns. Lazy Sign-up Design Pattern Most of the applications today require user management. Converting the visitors into registered users is a top priority for all the websites and app. It is not easy to make the user provide their contact information right away unless you are a reputed and trusted brand. If you’re going to ask the user to register/login to view the website or access the app, then it is highly likely that they might not do so. Users prefer to spend time experiencing the interface before deciding whether to register or not. So it’s a good design pattern to provide the option to the user to allow the interface for a specific amount of time or events before asking them to signup. This is called as a Lazy Sign-up design pattern. Once the user gets the feel of the website/app, he will feel much more comfortable to register and take the next course of action. Social Accounts Login Despite providing lazy registration, some users might be scared of looking at a longer registration form. Users prefer to do things which are simple and less time-consuming. The traditional approach is to ask them to fill a form and then send a confirmation email. This approach requires a lot of actions to be done by the user. This can be simplified if we provide them with the option to login using their social media accounts. The register screen will display possible social media icons like
  • Connect using Facebook
  • Login using Twitter
  • Login using Google+
The users can just click the account of their preference and they will be automatically registered. There is no need to fill a form or take any other action. This design pattern also removes the need to remember multiple passwords. All the social media sites provide their free APIs for integration. Navigate Website Sections Single page websites have gained popularity in recent years. Though they are extremely fast there is one drawback in it. The single page website might contain a lot of sections on the same page. It becomes difficult to access the particular section of user’s choice. The concept of infinite scroll UI is easy on eyes but might be a burden to the user. If the user has scrolled down to section 12 and if he wants to scroll back to section 2, he has to manually scroll all the way up. This is not a good UX. This can be handled in two ways Fixed Navigation Menu: The menu will stay on the top forever, it will be always visible even when you keep scrolling. This will make sure, the user can access the menu to reach other sections easily at any given moment. Jump-to-top Button: This is a small button that is mostly displayed at the right bottom corner of the screen always. When clicked user will be taken back to the top of the site always. This is really useful for e-commerce products page and long blogging articles. Long story short, there is no pre-defined rule to select the correct design pattern. You need to understand the problem in hand and analyze how to deliver the best user experience and choose the design pattern accordingly.
Continue reading

UX the way to move forward – Importance of UX over the standard UI mindset “Breaking the barriers”

Let’s first understand the underlying difference between an UI and UX. These two terms are always used together which might cause some confusion. To explain the difference in simple words; UX the way to move forward “UX is focused on the user’s journey to solve a problem, UI is focused on how a product’s surfaces look and function” – Ken Norton UI is the design aspect which focuses on how the elements should appear on the screen like their size, color, alignment, etc. UX is how the user interacts with the interface and move from one screen to another. The term UX has become extremely important for mobile app development in recent years. Most of the companies now understand the importance of UX and hire expert UX designers. UX is a science while UI is more of an art. UX is what defines how a user interacts with the app and the process flow. To understand it better, here is a small real life example Imagine yourself placing an order in a normal restaurant and in a luxury 5-star hotel. Now think how the waiter will interact with you in a normal restaurant and in a 5-star hotel. This is defined by User experience. A Waiter in a 5-star hotel greets you with a pleasant smile and takes your order with a lot of patience and also answers any questions you might have. This is the reason why people who visit such places becomes loyal and prefers to visit again. The waiter in a local restaurant who is not well paid and trained, will not greet you with a smile and might not even have the patience to list out the full menu. This bad experience will drive away customers. Same applies to UX design; it is how your app interacts with the end user. If it's pleasant, simple and direct, then the user will be satisfied, else they are most likely to uninstall the app. A good UX should be simple and should not confuse the user. It should be intuitive in the sense; the user should navigate from one screen to another without thinking at all. Slowly but steadily, it will be the quality of UX that will determine the competition. Just a few years back, it was the service and pricing which made a business stand out in the competition. With mobile apps, it is the app with the best UX will win more hearts than the one which offers the same in lesser price. Let’s consider there are two hotel reservation apps that offer the same functionality. Let's assume APP-A1 takes 20 minutes to book a hotel room and APP-B1 takes 5 minutes for the same, then users will prefer to use the second app. A bad UX is one of the primary reasons why users uninstall the app these days. In near future, UX will slowly overtake UI and will be the forefront of app development. With the growth IoT, VR, etc, UX becomes much more sophisticated and equally important. A company cannot launch an app with a perfect UX always, it is a continuous process. There will be instances where a company might launch an app update just for UX sake.
Continue reading

2017 mobile App UI/UX Trends

  According to a survey there are over 2.4 million apps available in Google Playstore alone in 2016. Mobile app development is the future and the most crucial part of app development is UI/UX and security. User Interface design and User Experience have evolved over the past 3-4 years. This article will explore various UI/UX trends to be popular in 2017.
  1.  Micro-Mini Interactions
These are basically small animations that happen in response to a user event. User event can be a touch, drag and drop, double tab, etc. The objective of these micro-mini animations is to enhance user experience. When a mobile app user touches the check box, instead of just enabling the tick mark, you can show that tick with a fade animation from bottom to top. This will give a pleasant effect to the user and keeps him engaged. 2017 mobile App UI
  1. Age-Responsive Design
Designers have been using the responsive design for years now, which basically means the website will adjust based on the device size the user accesses it. Age-Responsive design is a step further in that direction. Here designs will vary based on the age of the user who is reading it. We can determine potential age of the end user based on product we’re developing. If the website is selling hearing aids, then their primary target audience will be elderly people. So a design which has higher font size and letter spacing will make easier for them. If the website is selling printed t-shirts, then age responsive design can use small animations, bright colors, etc.
  1. Interactive Walkthrough
This is basically showing the demo of the app to the user in the welcome screen. It can be a small animation or a video. It can also be a set of slides explaining the product workflow. You need to have a complete app before designing the walkthrough. You can also include the screenshots of various screens in your app. This is where you showcase the most important aspects of the app to the user. It is imperative that you provide the skip option to the user.
  1. Virtual Reality & Artificial Intelligence
Both the terms VR and AI have been in practice for a long time now. In recent years they have become more affordable to end users. Now they are part of mobile apps. The design for a VR should change with respect user actions like head movement, acceleration, etc. In a VR a user sees things in real time, so make it beautiful.
  1. Simple User Interface
The basic idea is to showcase only the important things and remove unnecessary things from the app. Do not confuse the user with many options; instead give him only what he wants to see. An important aspect of simple UI is the Invisible UI. In an invisible UI, we completely remove the UI and make the content as the UI. An example is Google maps who recently removed all the buttons and showed only the map.
  1. Internet of Things - IoT
Designing UI for a normal app and an IoT app is totally different. A user in IoT interacts in a different manner. App is only one part and there is the primary hardware device. Here the primary focus should be how the app interacts with the device through the user actions.
  1. Mobile payments
Mobile payments and wallets are the most trending topics in mobile apps now. When designing a mobile payment app, don’t focus too much on the graphics instead give importance to the following things
  • Make it fast and smooth
  • Give instant response – keep the user well informed
  • More focus on security and gaining user trust.
  • Easy access to their balance
  • Make it seamless
  1. Touch ID
A Fingerprint sensor on the mobile is not something new. There are many mobiles which come pre-built with this hardware. Now you can let users login to your app using touch id. No need to remember login credentials and is secure. Card Design - Cards are basically dominating mobile design as it is present everywhere from websites to native apps. They are designed to look like their physical counterparts. They are neat, little containers for information and a style made for apps. Card-style design lies at the intersection of design for desktops and mobile devices. It bridges the gap between interaction and usability. It creates a consistent experience regardless of device. It is basically used as an interface and distraction. Cards work well with content. Metro (from Microsoft) and flat-style cards were some of the earliest uses of cards that were specifically for apps and mobile devices. Google Maps uses layered cards to help users navigate and find the exact location. To conclude, cards will continue to stay as a fixture in mobile app design.
  1. End of Hamburger Menu - The hamburger menu is one of the embarrassing design conventions of recent years. It is not regarded as a default, unquestioned solution for mobile navigation anymore. It’s called a “hamburger” as it looks roughly like a bun-meat- bun sandwich. The idea of it was to hide site navigation on smaller screens. This design pattern accomplished a major goal by preserving precious real estate on mobile, tablet or other small screens.
Continue reading