Who doesn’t know anything, knows user experience.

This funny statement was given irritably, by one of my team member, when he came from a meeting. After having a brief discussion about the meeting, I came to know it was a common problem that a designer faces in most of the meetings. We start user center design and gradually, it becomes client centered … Continue reading “Who doesn’t know anything, knows user experience.”

Should Designer code? Or at what level, a designer should code?

User Experience, Design thinking, Innovation, Customer Experience; these are a few terms floating in the IT field for the success of a product. Designers are considered to be crucial in the success of a product. A big responsibility is already on the shoulder of a designer. Should designer know or do coding along with designing? … Continue reading “Should Designer code? Or at what level, a designer should code?”

Responsive Web Design – Performance Enhancement

Treating performance as design improves the user experience. No matters how perfectly we have design the information architecture and a great user experience with everything just one click away. Usability is useless, if performance is slow. Based on the survey , almost half of the web users expect a site to load in 2 seconds, … Continue reading “Responsive Web Design – Performance Enhancement”

Mobile and Web strategy to launch a product

We are living in a technology changing world. Every year new technologies, new frameworks and new devices are launching. Users are accessing the web product with different devices. Now, web is not limited to desktop on our workstation. It is in our pocket with mobile, it is in our living area with smart TV, It … Continue reading “Mobile and Web strategy to launch a product”

How to use grunt? – A build tool for web development

During the web development process, there are bunch of tasks that you’ll be doing regularly. Minifying files, concatenating files, compiling sass or less to CSS, unit testing and linting JS files are some of them. Grunt helps to make these regular tasks automated. It saves lots of time and energy, it has bunch of built-in … Continue reading “How to use grunt? – A build tool for web development”

Package Manager – why use npm? How to use npm?

Package manager manages assets (install, upgrade, remove, manages dependencies) used in a project. NPM is used to install node packages (such as underscore, grunt, gulp, jsHint etc.) from npm registry. NPM makes it easy for JavaScript developers to share and reuse their code. You just need to publish package to the registry. These reusable codes … Continue reading “Package Manager – why use npm? How to use npm?”

Why mobile UX customization is important for different platforms ? – Android vs iOS

When designing a mobile application or mobile website, UX people pay special focus on Android and iOS. It’s because, both platforms have combined market share around 94% and both have different appearance and personality. Both the platforms have their own design guidelines. If a user has to switch from one platform to another, it takes … Continue reading “Why mobile UX customization is important for different platforms ? – Android vs iOS”

CSS3 Basic UI module – working draft published by w3c

W3c published a working draft of CSS basic module level 3 on 10th March 2015, where they have extends user interface related features from the selectors, properties and values of CSS level 2. These UI related selectors, properties and value are proposed for CSS level 3. Note: it’s a working draft may change in the … Continue reading “CSS3 Basic UI module – working draft published by w3c”

JavaScript – Singleton Design Pattern

Singleton design patterns ensures a class has only one instance and provide a global point to access it. Singleton pattern is handy when you want to create a class whose functionality does not required any changes for its multiple instances. Basic Singleton implementation in JavaScript A basic singleton pattern can be created using simple object … Continue reading “JavaScript – Singleton Design Pattern”

Custom responsive grid with sass susy – grids on demand

While starting the responsive web development, first question pops up. Which grid framework to use? There are many grid framework to choose like bootstrap, foundation, 960 Grid System, Golden Grid System and many more. Are these grid framework flexible enough for modern designs? Class based grid frameworks are not flexible enough Bootstrap is one of … Continue reading “Custom responsive grid with sass susy – grids on demand”

Consistency and conventions are true friends for web

Consistency and conventions are two important element of design. By following the existing conventions, anything can be made easy to grasp. Consistency make user feel at home. Universal color code for traffic lights is (red, yellow, and green). Some conventions are must to follow, like stop lights are red and red means stop. Drivers know … Continue reading “Consistency and conventions are true friends for web”

SASS – Efficient use of Mixin and Placeholder

SASS (Syntactically Awesome Stylesheets) is an efficient modular way of writing CSS. It is Powerful and most stable css preprocessor, around us for almost 7 years. There are n-number of frameworks built with Sass. Compass, Susy, Gumby and Bourbon just a few name. Beauty of the SASS a CSS preprocessor Writing a vanilla CSS is … Continue reading “SASS – Efficient use of Mixin and Placeholder”

Mental model and conceptual model in user experience.

Design is a conversation between designer and user. How effective this conversation can happen; is depends on the conceptual model of the designer for the product. Designer does not interact directly with user. Designer only talk to the user via product. Imagine a scenario you have never seen a kindle device or iPad, and you … Continue reading “Mental model and conceptual model in user experience.”

Usability testing with blind users – How blind users work with web sites ?

Observer in usability testing gets actual insight of the users while watching them using a product. But what about the users using adaptive technology? like blind web users, how blind users work with web sites? While surfing net, I found a very good case study where 16 blind users were observed while using screen readers … Continue reading “Usability testing with blind users – How blind users work with web sites ?”

Meta tag – Configuring viewport in responsive web design

Desktop browser and mobile browser are not the same. There is no window, scrollbar, resizing option in the mobile browser. User flick, pinch and zoom in mobile browser, and these gestures are not there in the desktop browsers. Because of these interaction differences, viewport on the desktop and mobile are not same. Why viewport is … Continue reading “Meta tag – Configuring viewport in responsive web design”

Responsive Web Design – Pixels density and resolution

Any physical size of device cannot stop web from spreading its wings; be it a smart TV with bigger size or a smartphone in the pocket. Web is spreading all around, Though, physical size of the device is shrinking but resolution of these devices is increasing. Why? and how? High DPI and Retina Retina is … Continue reading “Responsive Web Design – Pixels density and resolution”

Responsive Web Design – Viewports and device pixels ratio

Major technology changes have been seen in last few years. Smartphone and tablets are changing the way of internet usage and taking the web everywhere. Responsive web design (RWD) is around from some years now. Initially the focus in a RWD project was just to decide the different breakpoints – like small, medium and large … Continue reading “Responsive Web Design – Viewports and device pixels ratio”

AngularJS – Conditional Display using ng-show / ng-hide, ng-if, ng-include, ng-switch

Hiding or showing parts of a DOM based on some conditions is a common requirement. AngularJS has four different directives (ng-show / ng-hide, ng-if, ng-include, ng-switch), which are used to conditionally display or hide the HTML DOM elements. Conditional display using ng-show/ng-hide The ng-show / ng-hide directives require a boolean value to evaluate the visual … Continue reading “AngularJS – Conditional Display using ng-show / ng-hide, ng-if, ng-include, ng-switch”

Single page application using AngularJS

Single page application is superior in terms of performance. It decreases load time of pages by storing the functionality, once it is loaded the first time. If you need to update small parts of page, it’s faster to focus only on these views and their data rather than reloading entire page. Some of the key … Continue reading “Single page application using AngularJS”

CSS3 Animation – Hover effects on icons

On the name of animation, flash automatically pops up in the mind, but flash is no longer required to create web-based animation. There are many stunning examples of CSS3 animation. Here, I have come up with the hover effects on the icons. These icon effects can easily be used by just copy paste in the … Continue reading “CSS3 Animation – Hover effects on icons”

Some good speed and performance optimization features in HTML5

Speed and performance optimization is very important in all the web products. HTML5 has lots of new and exciting features for both mobile and desktop applications. This post is focusing on the features that help to boost the speed and performance. Link prefetching Loading time is an important factor for a web product. Prefetch feature … Continue reading “Some good speed and performance optimization features in HTML5”

Some basic techniques to increase the website performance

In this competitive world, every company (brand) is trying to prove themselves different from others, where UX people are playing a good role by evaluating the market, competitors, and users. An application with great user experience have lots of study and research behind it. But is it sufficient, that an application have great user experience? … Continue reading “Some basic techniques to increase the website performance”

Responsive web design and images – Optimized images for normal and retina display

Adaptive image is not only to fit the image in large and small devices; it’s about contextual optimized image for normal and retina display. Responsive web design (RWD) has different context, like high resolution and low resolution display, high bandwidth and low bandwidth connections, high memory and low memory devices, small and large display, portrait … Continue reading “Responsive web design and images – Optimized images for normal and retina display”

Some cool CSS selectors’ addition in selectors level 4 – The future

The web is constantly evolving, Some modules of CSS3 has just started making its way, specs are still in development process and more advance level CSS modules have been drafted to evolve it further, which is being referred as “Selectors level 4”. Selectors have been with us since the beginning of CSS. Most awaited selector … Continue reading “Some cool CSS selectors’ addition in selectors level 4 – The future”

Performance improvement by writing efficient CSS selector

The web is moving from desktop to mobile and performance has become the key focus area in web development. All the UI Developers try to write maintainable, semantics and efficient CSS. But when UI developer becomes dogmatic about the standards, it cost the performance. I don’t mean here that; following the standards degrades the performance. … Continue reading “Performance improvement by writing efficient CSS selector”

Some HTML5 features that benefits mobile app

Native app vs HTML5 is most discussed topic in the web community. No doubt native app is leading in terms of performance, speed and user experience. The decision to go with native or HTML5 approach, can be made  by evaluating the different parameters, budget and project requirement. HTML5 is gradually booming and used by many … Continue reading “Some HTML5 features that benefits mobile app”

How to create retina-ready css based icons?

As a requirement comes up to create an icon, Photoshop or Illustrator pops-up immediately in mind. Making any changes in icon like changing style, size or color open the photoshop again and do the required changes. And if the required icon need to be used in a web apps for iPhone 4s and iPad 3, … Continue reading “How to create retina-ready css based icons?”

Different ways of making images flexible in responsive web design

Responsive web design is a future-friendly tool for websites, having three principles. Media Query, Flexible Grid and Flexible Media. Flexible grid is not hard to achieve just set an container element in percentage and linearized the element in small devices, text can be resized and flow in smaller and higher resolution but when think of … Continue reading “Different ways of making images flexible in responsive web design”

What’s good in Metro UI which can be used in responsive websites

Any new trend or new product in market always starts with some positive and negative face and if it is Microsoft product, majority of people cannot turn down to give it at least one try, that’s why Microsoft dare to make the drastic UI change named as Metro UI, which is being called new design … Continue reading “What’s good in Metro UI which can be used in responsive websites”

Different media features and media types of responsive design

Media queries plays vital role in the responsive web design when the term Media Queries for responsive web design comes up, general thoughts moves around is “media = screen” or “media = print” which is generally used in the web development.

But there are other media type which can be used like aural, braille, … Continue reading “Different media features and media types of responsive design”