How to Create and Combine Images for CSS Sprite

We are hard-pressed to make performance optimization our priority whether we are web developer or mobile developer. We need to code HTML and CSS carefully measuring every step of coding by its ensue. Web performance optimization experts are always cling to reduce the interactions between client-server at any cost.

If you dig their data you will find that apart from initial HTML page requests, the most of HTTP requests are made for image/content loading and UI elements loading. Here we can’t eliminate individual and unique images from HTTP requests, but we can think about the small images as frequently and regularly occurring UI elements as well as those images, which are appearing on all pages as theme might be included as our targets to reduce the HTTP request hence improve the page loading performance.

This is in fact, not a big rocket science. If we can combine all small images/UI elements or theme elements in one single large image and optimize them using latest Photoshop techniques, we can do great job to eliminate all HTTP request against this single one. Another benefit is that we can reduce the overall KBs for all images downloading if we go for only one. This technique is calling CSS Sprite in web development community.

However, we can’t implement CSS sprite technique for all sort of images, but icons and button images which are need to change frequently in order to show interactions and dynamism on the web page i.e., on-off status. For instance you want to show one button that is in “On” position before the visitor click it and in “Off” position if visitor has accomplished the clicking action.

single_button
single_button.png

In such conditions, we have almost identical images of these two status so if we place these two images either in vertically or horizontally aligned and make one combine image, we have to shoot only one HTTP request instead two. Well now, question is that how we can make two different calls for two different images with a single image.

Good question, here CSS properties of X, Y positions help us to determine that which image will show when and we can accomplish this by creating two separate functions for both individual image display. In simple words if we want to show “On” status we have to create a div class “On” and another div class “Off”. See below.

<div class=”On”> </div>

<div class=”Off”> </div>

Now, let’s define the functions for these classes such a way that they display our single combine image in two different X, or Y positions in terms of pixels here. But before that you have to do some graphics work in Photoshop or alike tool and set two status of the same button measuring their pixels/spaces.

For instance, if we have both status of button in same size, say 100px we have to create a combine image of 200px and call it single_button.png. Either in horizontal direction (X)or in vertical direction (Y). here we have taken horizontal direction.

Our next step would be code/define two separate functions for two different status. Therefore, the first function would be On function for On class in following ways.

.On {width:100px; height:100px;

Background:url (images/single_button.png) 0 0px; }

This function simply returns the image positioned on the starting point at top and the starting point at the left.

.On {width:100px; height:100px;

Background:url (images/single_button.png) -100 0px; }

This function simply returns the image positioned on the starting point at top and the 100px away in right side direction.

Isn’t it easy?

Present Cloud Computing Services for Mobile App Developers Part 1

Today we are living in device agnostic era where Internet is ubiquitous, with cord or without. This nature of device consumption creates some unique scenario for software developers who may be opt for web or mobile programming. On big devices, we have enough computing power in form of fast processors and huge storage power in form of large disk space. Against these, mobile devices lacking all and force us to look at different solutions.

It is true that we can’t take much risks with mobile devices where we don’t know that when our user will lost the device with all critical data. Therefore, storing data outside the devices is a mandatory provision. Cloud computing is one of the best solutions for this data trade off as internet accessibility is not much big issue. Thus, dependency on cloud is opening new avenues for small business to large enterprises where you are charged bit-by-bit you consume.

Before a year, thinking about taking cloud services was somewhat costly affairs and used this option is some inevitable cases only. Now, things have changes at 360 degree and recent explosion in cloud computing services makes the lives of web developers, mobile developers, all sorts of businesses, and finally, end users easy. Therefore, I have decided to discuss something about present cloud computing services for mobile developers who are reluctant to take advantages of cloud services for their universal mobile programming platform and in favour of their patrons in this short series.

Amazon Cloud and Web Services

Today Amazon is symbol of reliability and security for cloud computing, cloud storage, and web services seekers. Amazon is offering various storage services for your fatty data such as:

Amazon S3 or Simple Storage Service. Here you can get simple and intuitive interface of AWS management console to streamline your tasks. However, pricing of Amazon is bit higher in compare to others, but recent slashing has made now affordable for all including e-commerce businesses where frequency of data interaction is higher.

Against these, Amazon Glacier has devised for infrequent users who mostly opted dead storage services for their critical but less frequenting data usage. Here you web developers and mobile programmers can recommend their clients to take advantages of low-cost storage services for their data archiving and data backup needs.

At present, we web developer and most of the time mobile developers looking for the web services for our applications, which are demanding fine granular updates, with high frequency and persistency. In such conditions we have to access to raw and unformatted data storage at block level i.e., hard drive like storage. This in mainly happens in case we use Amazon EC2 instances. Thus, our best solution lies in the Amazon Elastic Block Storage or Amazon EBS in short.

With Amazon EBS mobile programmers can predictably scale data volumes upto thousands of IOPS per Amazon EC2 instance and grant access at different geo-locations as per needs by placing snapshots of Amazon EBS volumes in different blocks of different zones.

Recent mobile application development trends suggest an increase in offline services where absolute and constant connectivity is not possible. On such occasions, mobile developers have AWS Import/Export services for large amount of data transfer whenever the client devices get reconnections. Moreover, AWS Import/Export services are faster than normal Internet transfers that save you from bearing Internet upgrading cost.

For more, you need to wait for the next part.

Present Cloud Computing Services for Mobile App Developers

Since we know the Amazon as a brand, synonyms with the quality cloud computing services, for web developer as well as mobile developer communities. Its out-of-box services for

  • Cloud-based computing like Amazon EC2, Auto Scaling, Elastic Load Balancing, Amazon workspace, etc.
  • Low-cost data storage on Pay-as-you-go pricing model like Amazon S3, Amazon Glacier, AWS storage gateway, etc.
  • Fully managed relational and NoSQL database services like Amazon DynamoDB, Amazon RDS, Amazon Redshift, etc.
  • A range of networking services
  • Cloud based analytics services
  • A variety of managed services to use with your applications
  • Services to help with the deployment and management of your applications

Apart from these all packages for web developers and mobile programmers it is going to offer something outstanding in history and today we will take a glimpse on them.

A Tough Competition to the Google

Amazon is making progress rapidly. This retailing giant have thrown open a new portal aiming to help the developers round the globe to develop and create apps for its well-known App store and with the help of great tools and documentations they get the advantage of its cross-platform APIs. It seems Amazon is mercilessly intent to give Google a good run for its money with the App store.

It have given Google such a tough competition that Google have started giving availability of its play store round the world with adding the features like developers can submit web apps and can sell physical goods in their apps. The latest step taken by the Amazon.com in Amazon’s push is its new developer portal. The first and best thing it has done is it has made the application submission process streamlined for the developers.

Streamlined Submission Process for Web and Mobile Developers

In a recent blog post Amazon.com has mentioned that developers just need to do is drop in their APK application package file in the updated testing widget to get to know their written codes are compatible with the App store or not. If they are compatible and passes the test the submission process begins directly from the result page.

Amazon also has made efforts by updating, fixing shortfalls and improving the portal’s documentation section. They have provided the facility for developers to find App store API and get to know with what platforms they are compatible. For example, the developers can see that Android and iOS apps both show compatibility with the Analytics API.

Tools and Services for the Web and Mobile Developers

It has also mentioned in the blog post that Amazon has devoted a full page to the tools and services for the developers as it thinks that might be very helpful to the developers. The page also includes the features like game engine plugins and the cross platform plugins. Amazon’s portal also includes the pages devoted to HTML5 and iOS developers, which give the facilities to the developers such as they can add leader boards.

Like many other companies in the market Amazon has also acknowledged how much important the mobiles and mobile users are for its business and so it have made itself relevant to mobile developers as taking a step ahead. Amazon’s App store has become a great alternative to the Google’s App store giving it a tough competition.

Be Smart While Hiring Mobile App Talent

To know the latest news about what is going on today in the IT job market check your mobile device and mobile web. You will get to know about the latest trend. The numbers of mobile web connected devices are increasing day by day very rapidly. Mobile development for iOS and Android both are increasing on a fast pace and they are considered as today’s newest tech skills. On an average, tech pros with the mobile development skills are getting four to five job offers per day.

The constant fast-paced growth in mobile market the demand is exceeding the supply. The trouble arising for the companies is how to get the mobile skills in form of mobile designers and mobile programmers from the market as quickly as possible to accomplish their mobile strategies. Following are a few ideas, with their help recruiters and IT professionals can handle this issue efficiently.

Join Hands with Marketing

The marketing function of the business increases more and more interest in the mobility and it will put behind the IT departments in terms of technology investment in the near future. It is a great change seen as for the first time in the history the marketing department is spending more on technology solutions then IT department to earn revenues and shareholder values. A remarkable amount of competition is seen at the marketing level for the technology resources. Therefore, it is imperative to take help of marketing department and their experience in hiring mobile developers with desired skills sets.

Be On Your Feet

Planning to hire a tech pro with the mobile development skills, be ready on your feet, and just jump on any opportunity you see. Companies need to act and make decisions as quickly as possible and prepare aligned budgets and keep people ready.

Go Old School

Mobile development skills tech pros are getting into the lime light lately due to the shortage of skilled tech pros. In order to find tech pros with the mobile development skills the companies need to go old school way. As due to the shortage of tech pros, it is very difficult to find a suitable one. If you want to find a tech pro with mobile development skills, activate your networks with the help of staff, peers and colleagues.

Encourage Your Present Staff

It is quite difficult to hunt down a tech pro with mobile development skills due to the shortage of skilled tech pros in the market. However, companies to overcome this hurdle can encourage their own present staff and help them take interest and learn mobile development skills. This will reduce the burden of finding a tech pro and will develop your own staff skills. Just give your staff an opportunity and see them succeed. However, you need to invest in the resources that help them to learn and grant enough time to learn new skills.

Stay A Step Ahead

Companies can also do is provide their staff with the latest technologies in the market and encourage them to learn it. A few people in the staff will give in to curiosity, they will also try acquiring new skills in mobility, and it will benefit the company. Therefore, identifying right prospective candidates and righteously encouraging them to acquire such tough skills demanding some patience and commitments from you.

Gestalt Principles Sit At the Foundation of Everything We Do Visually As Web Designers Part 3

In the previous article, we had discussed about the laws that work while the human perceives the object. In our today’s article, we are going to discuss about the Gestalt principles that sit at the foundation of everything we do visually as web designers.

Principles

Most of the gestalt principles are easy to grasp and understand by web designers and web developers who have less understanding of human psychology. A common theme runs through many of them. Gestalts principles are at the base of anything that an individual perceives. This is the main point what we as web designing community need to know before run an initial survey of guerilla UX research on your audience.

Principle of proximity

Principle of proximity is much similar to the law of common regions, but it utilizes space as the enclosure instead of shapes, boxes or anything else. In this principle, an individual perceives the objects that are closer to each other as related to each other than the objects that are further apart from each other. When objects are placed close to each other, they are perceived as a group rather than individual different objects.

Principle of similarity

Law of Simplicity in web designing
Law of Simplicity in web designing

An individual perceives the objects that have same characteristics as related to each other than the objects that does not share those characteristics. Any type of characteristics can be similar may be the color, shape, size, texture, or anything else. When an individual perceives these objects with the same or similar characteristics are he considered them as related. Now, we have clear idea that how to differentiate and assimilate same objects just by inducing simpler changes in colors or textures during our web designing process.

Principle of symmetry

An individual tend to perceive objects to have symmetry among them as they form symmetrical shapes around their centre. An individual tend to seek a feeling of solidity and order by going with the symmetry. It is in his innate nature to impose control on disorder. Individuals always try to bring symmetry in their life and others around them.

Principle of continuity

An individual perceives objects that are arranged on a line or curve as more related than the objects that are not arranged on a line or curve. It is in an individual’s instinct to follow a path, a road, a fence line or a river. An individual tend to perceive or move in a particular direction until he finds something significant to perceive, or to determine there is nothing significant there to perceive. This gives us a big weapon to make a continuous object with simple dots or tiny lines where less pixels and lightweight files are mattering more in a web development project.

Principle of closure

Filling symmetry
Filling symmetry with simple shape to make complex one during web designing

Here in gestalts principles the principle of closure seeks simplicity. The principle of closure is the opposite of that of the law of simplicity. In law of simplicity, an individual perceives a complex object and tries to find simplicity in it while in principle of closure an individual perceives different parts of the object and combines them and form a simpler one. While an individual perceives a complex arrangement of objects, he tends to look for or find a single, recognizable pattern. Human eyes tend to fill in missing information while it perceives something and forms a complete figure. This ultimately enable web designers to draw simple shapes in fewer numbers and make a simulation of a big and complex image without rising KBs and web page downloading rate.

 

Gestalt Principles Sit At the Foundation of Everything We Do Visually As Web Designers Part 2

In the previous article, we had discussed about the ways in which an individual perceives an object and environment around him. This is important for web designer and web developer community to get such fundamental understandings. Therefore, in today’s present article, we are going to learn about the laws that work while the human perceives the object.

Laws

Most of the laws are easy to understand for an individual, as it does not require any technical in-depth knowledge about the human psychology.

Law of Simplicity

Generally, an individual prefers to perceive objects that are simple, clear, and ordered. Based on the human instincts these things are considered as safe. Simple objects are familiar so it take less time in processing and presents with less hazardous surprises.

Figure/ground Law

Figure ground law is related to the relation that is shared between positive elements and negative space. An object is considered to be positive element and into the focus when an individual perceives it. Simply we can say that an eye will separate the whole object from its background to understand it and process it.

Law of Uniform Connectedness

From all the laws and principles that discuss about the relatedness of objects the law of uniform connectedness is the most powerful. An individual perceives the objects that are connected as related to each other then the objects with no connection. Objects can be said as connected when they share something common or have links between them.

Common Regions Law

The other way in which an individual perceives objects is in groups, enclosure or arranged in a pattern. All the objects placed inside the enclosure, group or patterns are perceived as related, and the objects that are outside are perceived as different and separate. Typically you can do is to place the objects in a square, circle, triangle or any other shape or can place them in a different background then their surroundings will show them as of common region.

Focal Point Law

An individual tends to perceive objects, which seems to capture his interest or the uniqueness of objects draws his attention and holds it. This law shows us that an individual’s attention is drawn and held by the objects that are in contrast, unique and of his interest. An individual’s attention can be drawn by placing a different object in the group of all the similar objects and it will successfully hold his attention. The focal point law and the principle of similarity are both related in a way. The focal point can’t be perceived if there is no similarity between the other objects.

Law of Past Experiences

An individual tend to perceive objects according to the experiences that he have gained in the past. The law of past experiences is considered as the weakest among all the others. As all the individuals have different perceptions and past experiences it is difficult to assume how an individual will perceive an object. The perception of an individual differs from that of others on their past experiences.

 

Gestalt Principles Sit At the Foundation of Everything We Do Visually As Web Designers Part 1

Gestalt had drawn some useful principles in human psychology and we web designers always and all time dealing with human psychology anyhow. Therefore, today I have decided to introduce some useful principles and their importance in web designing process.

Every individual have a different perception. They perceive things and objects in their own way. Human being when looks at an object he perceives it entirely before she sees the particular object. Human sees an object as whole before she starts seeing its parts and looking minutely about its features. Humans tend to see the objects in a group rather than as different objects, whether they may relate or not. Technically human brain has a few characteristics in which it collects information and perceives the environment around it. Following are the ways in which an individual perceives objects.

Emergence

Emergence is the process of forming complex patterns with the help of simple rules. When an individual attempts to identify an object she looks at the outline first. Only after identifying outline, she matches the shapes and parts of that object and gets the clear picture of it. Emergence is a way in which an individual processes the information that she receives from his perception and draws a result.

Perceptual organization

Perceptual organization is a way in which an object that is perceived contains more spatial information then what is actually present. Generally, humans match the patters of what they see to the patterns of the objects that are actually present in their memory. Moreover, always there is no exact match present. They find a near match, fill in the gaps and spaces with it, and perceive an object in that manner.

Multi-stability

Human brain is active in such a way that it does not rest on an object for a certain time but keeps on moving over the other information inputs that it receives. Multi-stability is the tendency of human brain to dodge between the objects perceived at a time and their alternative interpretations. An individual can perceive an object in more than one way. She is not capable of seeing both at the same time but dodges between two alternatives quickly.

Invariance

Human brain is capable enough of identifying an object or processing information by just from a clue given to it. Invariance is a way of perception in which an individual perceives a single object and recognizes it independently whether of its rotation, translation or scale. Despite an objects different appearances an individual can identify it as she have developed an ability to recognize it from different perceptive.

Conclusion

The perspective of every individual is different from that of his fellow individuals. To attract attention and to motivate an individual to act on it you have to put forward something that attracts attention of the individuals perceiving it. In graphic design too, you will have to make a design that appeals your observers. You can get attention from your observers by designing something that touches them and appeals them based on their emotions, needs and wishes.

In this article, we have just discussed about the outline of how an individual perceives objects and environment around him, collects information, and relates to it. In the next article, we will discuss about the gestalt’s principles and their working in designing.