Do users really hate change?

If anyone ever learned about managing a bit. Would know "Change" something like that. No easy way, no matter where in the world. Change is often resisted in the beginning and perhaps always will be opposed to it, as it has made many people believe that users do not like change.
As one of the country still has a large group of people still living by farming. One day Leaders tractors are offered to the farmer group is instead plowing buffalo. The first thought that comes into your head farmer was inevitable subject of a hassle to use. They thought it would be more complicated to ride buffaloes as they have done for me. I need to learn

Users are keeping an open mind is difficult.

Farmers were divided into 2 groups, one would like to try this because tractors you think it would help plow faster. The other group would not be interested. It was bigger than they were. Why is this?
If it is short, simple answer is, "They do not see the value of it," but if it took a long time. We would have to pursue reading and research. In order to answer this question, John T. Gourville has mentioned in his book that. "Making Sense of our new products is difficult, it is very much cause them to hit the point of view whatever objects they perceive. Not from what it really is. And they tend to compare what newcomers to what they were originally. If they can do something new, something better than the existing structures. I would view it as a "get" but if there is something new, then do not. Or made worse I would view it as a "loss".
The study also found that. Most people are seen as a transition to something new. It is not interesting at all. If anything, it has come as well. What is lost The potential to make them satisfied. We must make them feel that they "received" rather than "losing" 2-3 times ever.

For Users "satisfied" him to "Stop".

Some users may wonder why to make weight loss a lot more to it. This is because people are struggling with something when those needs. Response was already there. I use the old stuff that I have it. Found that he was satisfied with what already exists to a certain extent. Or if they are forced to use it. I would feel comfortable with it gone.

We will not change it?

The question is, how do we know that more than 2-3 times its size? Of course we do not know it. Because the satisfaction Can not be measured in numbers, the solution is to try to reduce the losses to a minimum, users must first. Then offer something new. I think it gives satisfaction. Even if we can make him feel not lose anything. Changes, then the greater the chance of success.
In the days before to confirm that we have received the parcel already. Postman will file paperwork for us to sign, but now we will see how the signature has changed. Postman to come with your portable computer. And we signed on to the screen of the computer instead. When we signed up It saves the data to a computer server, which will allow the delivery can be checked from the website immediately if the parcel is not to hand LLC.
If you look carefully to see that the transition from online documents is not a small matter, but users feel satisfied. Whether the sender Even given the Of course, the sender must be satisfied. The online system will allow you to check the status like never before. But the part of the recipient Although this change I will not have anything But he did not lose anything either. Changing the way of the original signed onto a computer screen to make him feel excitement or fun at all.

Users do not hate changing

To see that the users are not actually hate the changes yet. But we have to make them see the value of what we have to offer is yourself. We often see the reluctance of users are always getting new things coming against us reduce this by making them feel familiar. Make them feel that they can not control it. I feel that it is easy to make. Learned quickly to say that users hate change. If out of your mouth, it means that the designer has retired from being a designer, then perhaps what users hate is not always subject to change. But designing our separate

An introduction to Wireframes

Many a time to do the project up've done Wireframe well for me. The purpose is to be a tool that allows the operation goes smoothly it is because Wireframe Terms of collaboration. And also use it as a reference document, which actually is not a Wireframe model stereotype. Individual or company may have a different way out. But the same is intended to provide an overview of the site. The team understanding And develop in the same way there.

In Wireframe what?

So to Wireframe like to plan our work. By writing out a diagram so that it is easily understood by Wireframe No details of the beautiful, whether it is color, font or layout, but it only shows what is in it for me. Click this link to the page where I then hit it enough to Overlay Hover mouse to what will happen. Details of these Wireframe we can put into it.

Wireframe preparation for

Before doing Wireframe we should have been prepared before. From the various requirements of the project time talking to customers. Must be clearly agreed And ensure that understanding Then again, finalizing requirements even more detailed the better, because it gives a more complete Wireframe.
When requirements are finalized, we should use what we concluded. The first brainstorming That this is okay. I actually do not have any suggestions or what limits you. This important step Which everyone in the team should be involved. Contended that this position must be a position, because the more people will think. We are even more diverse perspectives. When there are differing opinions Let us find the conclusion At all acceptable Or solution that best suits the project.

Wireframe do

After brainstorming, the team has come. Let us take all the decisions and make that a Wireframe view our website. Comprising what may Sitemap page up me. List to all I then noted
Next, let us see what our site has to face all types. May be divided into homepage, category, archive, page mainly I use an assortment of the page is the layout that we have to list a page with layout are all out, and then design the layout of each page, which contains a header. , footer, content, sidebar, or else we sketch out a rough first.

Now we have a list of all pages to list all of the layout in hand. We chose to do a page-by-page Wireframe by saying that I should use to do this kind of layout is fully on every page.
Once we have the layout of the page. Let us see how the page should be the content what the full list. Then determine the appropriate location for the content that you let us do this until the end of every page it.
Now we know that each page has content layout and how what position do. The final step is to put more into it. To complete the Wireframe of us could explain the behavior of different mechanisms (mechanics), or anything that helps to develop a way to correct it.

Wireframe Tool used to write any good?

Today there are many tools to help us build Wireframe made us use for free, but the tool I use most is a pencil and paper. All the steps described I would use a pencil to write down on paper all. Starting from the layout, along with a content box and then cut out using tape tracking channels that we have outlined. If we want to move We can then stick tape to stick it out immediately. Similarly to the paper "Post - It's" That's it.
Another advantage of using paper. We brainstorming in teams. What if you want to solve We can write into it immediately. May use a different color pencil. To highlight key messages and the time taken Wireframe to offer customers. We recommend using the colored pencils to write customer feedback into the Wireframe will see clearly that we have to adjust anything where I.
I tell all Is the work experience I repeated it. I hope your friends Will benefit some Finally, do not forget to bring Wireframe application to suit their own here.

Photo of Richard Dallaway .

What is the truely meaning of Web Design?

"Web Design" is not a word that would sound familiar to anyone very well for me. But there are a few To really understand It means this article, I will present a definition of Web Design in another view. This may cause many people to focus on more on Web Design.

Most people think that the Design is to make it pretty.

The word "Design" or translated into Thailand as "design" does not mean just in terms of aesthetics, only my friends, but familiar with the Project Manager or Business told the team that I have nothing. Then forwarded to the Designer Designer designed it on the web for Trends that are hot or interesting at the time. Or perhaps to see if competitors Or companies that we do not operate a similar design to me. Then it took a little bit, and then transmit the work done previous to the Designer, but this is not cheap.
Suppose you want to woo a woman. With the look and shape that looks good. Plus personalities reliable Make the Girl I love to associate with you. But when I married He finds You do not have the time to Or as not stable enough to take care of the problem. I leave you to decide
The "design" is like that. Beauty is only part of the design. To reinforce what you have designed. Are more attractive in the eyes of Users, but that is meaningless if it does not "answer" or it is not what Users really need.

The design is to solve

Why? Everything in this world is made for people to use. Involve "design" Yes, because when people are involved. Once the design has a small problem to solve those problems so that Users most satisfaction when not in use.
Ever asked yourself lately? Why the spoon, it must have several. Whether it's a tea spoon spoon spoon spoon etc. Why not do the same to you? The simple answer here is no spoon, how in the world can use it to do everything. If you put a tea or coffee. Teaspoon would be no problem. But if we're going out to eat soup or rice would be difficult to see. Or if we take the spoon out rice to the coffee. Would not really suit me. Design spoon The designer (Designer) so that the spoon is intended to do anything. Users can then be designed to do that at the most satisfaction (ease of use. Beautiful, powerful, etc.)
The website design is like that. We need to see what the problem is. Then let us find a solution to those problems. The solution was then on We'll make it beautiful I always remember that "you could do further. But if it does not meet the Users, it was considered that bad anyway ".

Customers are not smarter than us.

In working with clients Most people usually ask customers if they need website kind. Or ask how the web wants us to sample. She comes to the web Was made to come out in line with the web client selection. But here is what you should not do.
Do not forget that the design is to solve the problem. To ask customers if they need a web page. That is my own design clients. Then you are Only the working class, right? Always remember that the problem is none of it. This solution may work on this site. But with the web, but it might not work. We can not use the same Solution to every problem on the web, even if they will do the same, or similar. His customers However, you will ensure that. Problems of the web is a problem with your customers.
Often our clients Always do what your competitors are doing themselves and ran track. You do not see all that stuff, it's okay with me own business. Duties of designers like us. What advice should I give to clients. Let us study information about clients. That the real problem is? Attempts to draw out the strengths of our customers to benefit. If the client has no strengths We made it When we find a problem To find a solution, it may try to do that if the Test up this way it okay if not OK, try another way. For this reason, The first meeting is the most important thing to me. Talk to as many customers Find it for me List to me what they are. Then find a solution to the customer at the most.
However, asking the customer, they can do it. But let us ask about the look & feel that I have about it. In this section We will be applied after we resolve these issues. I was exhausted

Do not walk on the tracks

Designer or most designers When I have free time, it's always nice to see a website that collects Design or create something new, but this is what designers should be very careful as possible.
Told to be careful is because. Each design is slightly different to that problem is not our problem. So keep in mind that no Solution that will work in every situation, we need to select the appropriate Solution of us.
Most of the issues have been resolved already on the site. Among those sites Often leads to solving the problem is always the word "leadership" in, well, I mean a site with a good solution that anyone can follow and agree that this is a standard Solution.
Let us consider, then, if that. Problems of our site Have been solved by now. We will follow the leader to do well? Simple, without much thought Works great with I am not really that bad.
If we want to solve By visiting villagers follow. I would say New graduates can do it. Do not underestimate yourself, then If everyone on this planet Thought but to follow the word "leader" would not be here. If you are a leader, you have to find on your own Solution. Creative And unique You will not find these things at all. Officers from watching If you think you do not see the design os ios if you think you do not see the design of social network facebook.
Going crazy or something? Leaders do not see Will it survive? I survived it, let us find out what our problems. Then solve it on the spot Do not worry people I will solve it. Look on the web site the other day were all selling points of their own. Some of the web as I do what nobody had done before (I think in what other people do not think) some of the web as it made things a person has done. But make it better (because it has a creative solution. Who does not like), I thought that I just follow the leader separately. That will not survive
Let us try to solve the problem on our own. Trying to find a point of sale But be careful not to make it a selling point. But do not try to diversify Let us just take into consideration enough. That if we do what the people had done before. It is only Will not come out naturally most.
However, it's not that we will see leadership not quite it. If you are watching other people We must be careful not Let's look at how to "think" of his view that he is thinking how to solve the problem. Do not see the results That they do Because our problem may not be of the essence here. Remind yourself that We do not create anything new. Or find inspiration from seeing other people's work bay! We are finding inspiration. Or new ideas from?

Inspiration is all around you

It is wrong not to do so. Will find inspiration from? How do you imagine yourself as a leader of people. Before he created something new, I have an example to look up to, right? I choose to think for yourself Of one's own Thought this was To cause something new comes up.
If you're going to find inspiration. Or new ideas No need to find out where it is all around you all the time just because you're living. Of course, you are faced with many problems as problems of your own. And problems of others you have seen. These are To inspire them with you. Do not forget that the world outside. Not on the computer screen
Some people begging money from rich philanthropists. Some see it pass by. Some people wonder whether or not this beggar. But then passed But some stand to see people begging. I think the reason Why is this beggar To the many donations I do? When he noticed the beggar He found that beggars are not sitting around waiting to get paid. He used to sing for the audience. Which at this point The people walking past. This admiration for begging And decided to donate money to the beggars in the end.
Some may wonder how to find inspiration. It was nothing to do with the issue of begging, I was told to come? About something because they inspire. Usually caused by a small In the daily life of me. But we must be thoughtful, observant and have a look at YouTube's imagination that anyone is going to believe that the two men wanted to create something to take for Video files to send to the other party look. It became famous as the site of this size. Another case is that sites such as facebook, which predates it by building a small site. Campus to fellow students. Share this student is a favorite on campus. To see that inspiration is all around us, only that you will find it. Or you will overlook it.
Another example Reflected on the subject of inspiration is clear is that the effects are all born by Parallax I have ever met with Parallax, which is that we look at objects. As we move We will find objects that are close to us rather than to seem to move faster than the leak are far away. A simple example is when we sit on the bus and look out the window. We find that the buildings beside moving through quickly. While trees further away to see gradual. Away we go slowly The sun even then large I hardly moved This principle has been applied to the design to add interest to the content you will see that Parallax was actually not a website design involves even less. But it is something that we see every day. I take it that is applied to the design itself.

We all have a Designer

Now we know how to design solutions that everything was created to allow people to use. There are always problems to solve Trying to find the cause of the problem for me. To find a solution on the spot. It was a tough match, we will resolve it creative and exotic. We will find inspiration and where? Let us look around us inspired to be hidden in everything. For thoughtful, observant Finally, do not underestimate yourself. Do not think that I can not create new things up because it is in the Designer instinct of everyone on this planet.

How to write an interesting content?

Or that people do not like to read Text?

It is said that people do not like to read books much. We will see that most sites choose to use pictures to communicate with the reader. Whether the position of a color and size are all contributing to the users eye. And turned his attention to the content they want to convey, except that the selection of the appropriate image to help the reader to understand more easily, too.
But sometimes Images alone may not be enough. We still have to use text to help communicate the story is complicated. Also in the picture are not clearly explained. Advantages of the book is that it is more straightforward. Readers do not need to interpret a lot like the picture. But because people do not like to read anything of any length. Then we can do?

People do not like to read Text (worthless).

The reason is that people do not like to read long text. This is because "time is precious" If we can better understand the content that spans multiple lines using just a moment, we will see the full text of the website goes down. However, with the limitations of the human brain. The grounds that this is impossible. For this reason, If our content is complex. Long or very much The reader must take a long time to understand. They might just stop caring and turn to other content on the "View more cost effective" instead.

The much shorter The more success the more

Time to offer what many people are trying to find various reasons to explain to the audience reassessed. This method begins with an account of the origins of the problem before. Be linked to what they are offering at the end. Which is often something that solves the problem. This method seems to be better if we use the convention that the audience could not get anyone to get away. If tired of your presentation
But contrary to communicate on that site. Visitors to our web page and will close as soon as I "think" this content is not attractive. Or do not match what they are looking at. Although actually it may not be that way, so that communication to the point it was a better choice. We chose to use a short message. With an overview of all the content as soon as possible. To let him know that what we want to convey is about. This helps the reader to continue reading the rest of the finish. Or until he found that the content has no value for them.

Sample Selection Tool for use in presentations made. Without Coding

What kind of content Valuable in the eyes of the reader?

If we make the reader feel that the time would not be wasted. I did not take the time to come up with what they know. Although our content is several lines long. Or be a hundred pages long He will allow us to do is read the question to the reader as our content is worth?

Never knew

If our content is new to the reader. Or is that readers are paying attention. Or looking for work is their content. Readers are given special attention. And will be read As long as doubts persist that the news of the launch of a new iPhone model, teaching Parallax Scrolling etc..

Straight to the idea itself.

However, even if that content is what the reader already knows. But it can make the reader's satisfaction as well. If the contents are taken as confirmed. Or prove that the idea of ​​the reader as to what is correct, such as articles about choosing a User ID and Class in a CSS Selectors etc..

To understand

Above all Whether the content is well written it is. But it was useless anyway if the reader read the innocent. Using simple words Or the choice of languages ​​to suit the male readers will help the public to understand our content more easily. We assume that the reader of the web mostly. Geek we may use technical terms without high explained very carefully that this word means anything, conversely, if the reader of the web, we are mainly a beginner. It may be of technical terms. Then turned to what it used to be easier to understand and so on.

A close

Finally, the contents are reduced to very quite. If it is arguably far more male readers. Or is content that the readers do not benefit after reading much like talking about content CSS5 though CSS3 is not static at all.

Write what you like, vs. Wrote what others like.

Many people do because you love. To Write Love on what self-interested. Granted, it is good to do what they like. But if we hope to create a lot of traffic then it was. How could this so far. Let us evaluate if our content, "see the value" in the eyes of the reader or to. What is his problem Let us solve the problem had to be. As we can see in a single view to the reader what it is. To make your readers happy, it will become easy. And then creating a lot of traffic would not reach.

An introduction to Flat Design

No one would deny that the flat design is the hottest design trend right now. The question is will it be like any other design trend has been to just stay single. Or it will become a best practice to design it?

Of the Flat Design

In the last 2-3 years, the various designs. Whether it is a website or application. Often use a concept called. " skeuomorphism "but the current Designers began to look like we were designing the digital. We do not need to emulate the things that exist in real life in any way. Because some people may have never seen or used it at all. Design by focusing on the function to use to be more appropriate.
After Microsoft launched the Windows Phone 7 and Windows 8, people began to recognize flat design more with UI (User Interface) at the moment and colorful at the same time simple to make flat design is popular at the time. rapid and is used widely in design, be it a website or an application. This may reflect that I just did not want the UI overtones always amazing to get a simple UI, and can meet the requirements is sufficient.

A Month With Windows 8 - Week 2. by Jamie Ryan

Flat Design is?

The flat design concept was to design everything seem flat. It will reduce whatever. To give added depth to whether the light and shadow. Inserting the object's surface gradients, including among other things. To make objects float out. This is because the flat design to let users focus on the content rather than to go do other things, the challenges of using a flat design, we will design, however, the users still know that the element is intended to do anything. But it looks to flat.

Elements in Flat Design will not float out like a flat. Skeuomorphism

Flat Design looks like?

Simple

The most obvious characteristic of the flat design is simplicity. We often see that the various elements in a flat design will look flat, no light and shade. Inserting the object's surface gradients include other techniques. To make it float off the screen.

Page Design Pricing of simplicity.

Colorful

flat design, the colors are more versatile. Normally we may use color just 2-3 colors but flat design may be used up to 6-8 colors quite a popular color choice for that use. Usually it is bright or flashy because making everything look flat may cause users to recognize and distinguish the various elements that are difficult to do anything, we need to use color to help.

Using a variety of colors, Flat Design.

Large text

or using text, typography Becomes important for the choice of typeface flat design must convey the emotions of the web or an application. Whether it's emotional, exciting, mysterious, or the typeface used must reflect a sense, it is not the choice of words must be concise to the point so that they can easily understand, remember that elements in the flat plains to. Is that it will help "promote" the typography of us out more.

Typography is an extremely important part in Flat Design.

However, flat design may look different out. Depending on the creativity of the individual designer if we would begin to see the sample flat design flat design designs used more. " Flat Design Graphics Web Games + Free beautiful. "

Then Flat Design It Anyway?

Why the flat design is popular very quickly. Not just because it looks absolutely stunning. But because of the simplicity of it. Which would be beneficial in many ways. Follows the story together

Easy to use

First, it is Simple and straightforward of the various elements, the UI is very easy to understand as well. Nothing bothers the eyes can cause users to be faster than that of the positioning of the various elements to help users focus on the content that we have to offer. This means that users will understand what we want to communicate more easily.

Pretty

Using bright colors Including the letters of the flat design makes web or app apps look stylish fun amazing. If it matches what we want to offer and what it flat design will attract the attention of users as well.

Responsive

flat design is ideal for the responsive web because it has a bright color background. The big book It's flat icons However well meaning only. Which these elements Can be formatted to fit the screen in different sizes. Is not difficult to design a similar skeuomorphism.

Flat Design is not as easy as you think!

Do not forget that " the design is to solve the problem , "If the purpose of the website is to communicate with the user, then the website design. Is to make communication as smooth. And successful
The real purpose of the flat design is not to make it look flat. But the context makes it simple to make content stand up shower. This can cause users to be able to understand what we want to say easier. Our media has a greater chance of success. And this is why a flat design to be used multicolored Why Why use typography, bright colors, large thick because you want to create a contrast to the stream itself.
If we assume that the flat design is easy to say that it is wrong because it is not lost. skeuomorphism designer yet many people often complain. After changing the design of a flat design skeuomorphism then users do not know which one hit it. Which is to fill the Because it is flat all the same. This is because the designer is interested but beautiful. It does not solve the real problems of communication itself.

Form designed for Flat Design

elements that are intended for contact with the users do not need to see come out. Or movement had always to hand, we can make it is by design. Skills to pick a color And size of the font Including the placement and sequence of content. Plain flat design is important for the designer need to have the option to use flat design constitutes a measure of the actual ability of the designer.

Flat Design is a measure of the true capabilities of the Designer.

Do not let the Design Trend hurt yourself!

trend also continues to be a trend day long, flat design that would have been it. But that does not mean it is right for every job we often see flat design in about a startup web single page or visit the portfolio blog especially focused communications firm so that users understand what is. presented as soon as possible, but if we take flat design to a web agency. Or visit the famous resort in the Maldives. It will be compatible right. We can follow the trend, but be sure it's not going to make the contents or functions using our degraded.

Using the web Flat Design with Single Page.

Others to indulge more Pamper yourself for less

The difference between a designer and artist is one thing to follow the order of the artist, the designer chose to show themselves off. We Design Let us remind ourselves that we are not certain artist we might like. But do not forget to see if users liked it or not? It lets users easily used up or not? We did not do it to yourself to spend alone. If we take this into account at all times. Whether we take skeuomorphism or flat design, we can still create a wonderful work anyway.

What is Skeuomorphism?

The term "Skeuomorphism" may not be familiar to many people, but for Web Designer I would have known for sure. Because it is a design that has been very popular in the last 2-3 years, the question is, it is also popular for another long?

Skeuomorphism is?

skeuomorphism Whatever design is Maintaining some manner or other elements. Ever need on the days before it. Although it is not necessary at the present time. The most obvious example is. Shutter sound of the camera on the mobile phone. Which often mimic the sound of the camera shutter sound in spite of the past, it does not use a shutter mechanism to make noise it is.

Skeuomorphism Help us feel "familiar" more.

Whatever design using skeuomorphism. It has the advantage that users will feel familiar. Or feel uncomfortable Due to ever experience anything like this before in real life. Against or feel that the harder it is diminished. For example, the skeuomorphism in the digital world is seen from the UI design of various applications on iOS because Apple wanted to learn how to use quickly. I would hardly call that you know that this application is doing. And used?

This example is an application called "Calculator" or "calculator" that we will see that this application is designed to give people the feeling that they are using the Calculator application really is skeuomorphism.

The application is called "Compass" or the "compass" of the application itself is designed to look like we were really holding compass it is known that users rarely need to think or learn what it used to be. Of course it is. skeuomorphism

The iPhone 4S review (for Girls). by Rebecca @ Florencefinds

Another example would be an application called "Newsstand" or "newsstand" application that will display various books. We buy comes in the form of a bookshelf, which actually it is not necessarily any bookshelf. May simply be a list of books we bought the tiles around. Users can find the book they want it as well, but Apple wants users to feel as if we are choosing books to read from the application really is, it still is. skeuomorphism

Skeuomorphism Not suitable to do everything.

skeuomorphism May make some users feel comfortable. And it's actually fun to use. But it often comes at the areas that need it the UI example application named "Thermo" or "thermometer" that we use for that application temperature is skeuomorphism. It can be seen from the look of the display thermometer temperature, which was designed to resemble it.

Let's see one more application named "Weather", which took the same temperature. But it is different in that the application is not available. skeuomorphism

We will see how this application will tell you the current temperature of the place where we live but also the temperature in the days ahead and the weather as well. This information will not be displayed if a model. skeuomorphism Because there is not enough space

Nowadays, it's a dead Skeuomorphism!

To dominate the market share of iOS, users began to familiar with. skeuomorphism Unconsciously as well as the designer to take this concept to the design application over the past year. I was not called out. skeuomorphism easy to not think too much.
Using skeuomorphism It should not be surprising However, the excess is what is should not imagine that if everyone used skeuomorphism a designer, what would happen? You can be sure, however, that this is the best UI then? It is possible that it has a better UI is in the world? The answer is of course impossible. But if we continue to design in the skeuomorphic better UI would remain undiscovered.

Back to Top Common?

In 2012 Apple has big changes within the organization, iOS software chief Scott Forstall, the man behind the UI design skeuomorphism. Jonathan Ive has been the role of the former is viewed in terms of the design of the hardware to take care of the entire design.
Jonathan Ive seen skeuomorphism Unnecessary Instead of taking the time to do amazing effects overtones. I took the time to give people the ability to access the functions they want to use it for this reason it is better to dismantle the design of iOS 7 is already designed to do this all over again. This will reduce the skeuomorphism then turn to a simple design in neutral (flat) instead.

iOS 7 Vs. iOS 6: Comparing The Home Screen & App Icons Stock. by Trevor Sheridan

Using Skeuomorphism Not guilty

Using skeuomorphism Is done in But should be used to ease. Situation was not what made the original so well that I do not appreciate the new UI of Windows Phone 7 that thinking different. And also made out well this new Windows UI is like reminding us that this world is not there yet. skeuomorphism Simple design It looks the same, I think that if Windows does not make it out. Nowadays we may see skeuomorphism Everywhere it is not.

Windows Phone 8 StartScreen, used with permission from Microsoft.

How to use picture element and srcset attribute

In making responsive web design, if it comes to images. In the web page, We may have to choose a size so that it can be displayed clearly on the desktop but with the limitation of responsive web design making web each version is to use common code, be it mobile, tablet or. For this reason, any desktop It causes problems that mobile may need to load a large unnecessarily. Or who uses retina display may be found that the load is not much contrast. Since it is not supported screen resolution high enough.
Problems with images in responsive web has become an important issue. Thus resulting solution, called "Adaptive images" purpose is to come by. This allows the user to load only the images that fit the user's environment at that time. Rather than forcing users to load size. However, this method is quite complex and difficult.

Of the Adaptive Images

adaptive images originated from a group of developers. See the importance of this issue. Together to try and solve the problem. They have to report to the WHATWG to know the solutions to their problems WHATWG proposed that they should set it up as a group. They follow the advice of the WHATWG and the group name ". Responsive Images Community Group (RICG). "
RICG solution is to add the html element named "picture" into which the picture element is inspired by the video tag markup that meets the workflow of RICG stage of maturity. specification The issues are incorporated Possible and then see if their solution to solve those problems or not.
During RICG work was Apple employee who is named Edward O'Connor has offered his ideas directly to the WHATWG was perceived as adding srcset named attribute to the img element to be a good choice. than the use of a picture element RICG.
For this reason, Groups of ideas about adaptive images are divided into two groups of developers (people who wrote the code) is most like the way the picture element implementors (the lead. specifications To make available to web browsers) back like the way srcset attribute over.
Shortly thereafter, the WHATWG, whose members are mostly implementors choose to add srcset into the draft of the specifications rather than a picture element of RICG This event is offensive to some developers in RICG because the ideas of Edward O '. Connor did not follow the process as RICG have done from the start, however the 2 solutions as they are developed continuously. And have been added to the draft. W3C eventually

Picture Element

As was told to the picture element of RICG is inspired from the video element, which RICG regarded pattern this authors (the code) is probably familiar with the highlight of the picture element is to support media queries. That means we can set the terms of how you present yourself, the picture element has a fallback for web browsers that do not support them. This is the same with the video element itself.

<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><picture> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="medium.jpg"> <source src="small.jpg"> <img src="small.jpg" alt=""> </picture></span> <picture> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="medium.jpg"> <source src = ". small.jpg "> <img src="small.jpg" alt=""> </ picture>.</span>

1 2 3 4 5 6

<picture>    <Source media = "(min-width: 45em)". src = "large.jpg">    <Source media = "(min-width: 18em)". src = "medium.jpg">    <source src = "small.jpg">    <Img src = "small.jpg". alt = ""> </ Picture>

However, the picture element might be some problems in the parser's performance because web browsers will have to waste time looking </ picture> to come first. Thus it can be calculated that I should choose to show.

Srcset Attribute

Let's see what his ideas of Edward O'Connor chose to use the same adaptive images with img element instead of creating a new html element, only that he proposed to add another attribute to which it is srcset enough.

<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><img src="fallback.jpg" alt="" srcset=" low-resolution.jpg 1x, high-resolution.jpg 2x" ></span> <img src="fallback.jpg" alt="" srcset=" low-resolution.jpg 1x, high-resolution.jpg 2x">.</span>

1 2 3 4 5 6 7

<Img      src = "fallback.jpg"      alt = ""      srcset = " low-resolution.jpg 1x, high-resolution.jpg 2x " >

Using the example above, it is evident that srcset srcset attribute it incorporates a different version. We have prepared by a comma separated featured srcset attribute is that it can be put. "Hint (hint)" for each of the web browsers that we want to choose this show when.
hint of srcset attribute exists three types, namely w, h and x by x refers to pixel density of the device that is the equivalent. We can choose to display the picture to fit the screen, high resolution retina display already.
W and h is the mean size of the viewport biggest or max-width and max-height enough to see the following example.

<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><img src="fallback.jpg" alt="" srcset=" show@0-720.jpg 720w, show@721-1280.jpg 1280w, show@1281+.jpg 1x" ></span> <img src="fallback.jpg" alt="" srcset=" show@0-720.jpg 720w, show@721-1280.jpg 1280w, show@1281+.jpg 1x">.</span>

1 2 3 4 5 6 7 8

<Img      src = "fallback.jpg"      alt = ""      srcset = " show@0-720.jpg 720w, show@721-1280.jpg 1280w, show @ 1281 +. jpg 1x ". >

From the above it is evident that hint and w are referenced to the max-width not min-width by a large format that we will use with infinite width and then we put a hint as 1x, which web browsers'll know that it should be used. This figure shows the result if the viewport is wider than 1280 px.
Some may wonder how to h is w can be assigned to a unit em or not? The answer is "no" reason is em is a unit in view of the authors, who finally understand what web browsers is px anyway.
Srcset attribute is that it has the advantage that we do not need to write a query that will select the wrong impression. We just put a hint only. The rest is left to decide for yourself whether it's web browsers I use. It will select the "appropriate" in such environments. The Auto Show It is affected by several factors, whether the network speed, latency, including orientation.

Why is the picture element and srcset attribute?

The simple answer here is the 2 solutions are still not fully answer the adaptive images in all use cases often we find that the mobile is smaller and look innocent. That's because most people will reduce the size of the image relative to the size of the screen. They may forget that sometimes. The focal point is not in the center of the image. Determining the size of the container is% based, it may make you feel the importance of the loss. Or smaller, they look innocent when viewed in the small screen.

Art Direction by Responsive Images Community Group (RICG).

"Art Direction" is to prepare the appropriate screen size and it can be used by the crop from the original size. So that the focus of the image will remain intact, although with a smaller screen it. Let's see what the picture element and use case srcset attribute can deal with this?

<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><picture> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <img src="small-1.jpg" alt=""> </picture></span> <picture> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media = "(min-width: 18em)" srcset = ". med-1.jpg 1x, med-2.jpg 2x "> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <img src =" small-1.jpg "alt =" ". > </ picture></span>

1 2 3 4 5 6

<picture>    <Source media = "(min-width: 45em)". srcset = "large-1.jpg 1x, large-2.jpg 2x">.    <Source media = "(min-width: 18em)". srcset = "med-1.jpg 1x, med-2.jpg 2x">.    <source srcset = "small-1.jpg 1x, small-2.jpg 2x">.    <Img src = "small-1.jpg". alt = ""> </ Picture>

The above code, we use the picture element to help in selecting the version of the image, we crop it to fit the screen size, the srcset then will be used to select the image to fit the pixel density of the device is. We can see that the picture element is great for making art direction, however, if no srcset attribute, then performance would be reduced to art direction, and this is why the 2 solutions were added in. specifications
Some may wonder how media queries can specify device-pixel-ratio is used here Why srcset with? The reason is that the device is device-pixel-ratio greater than 1 is usually the mobile, which may be the speed of the internet connection is not much use srcset the media queries have the advantage that we will let web browsers decide whether users were. I should have a version where if you use a retina display but you use your internet speed 56K fighters took a sharp one version to better times, maybe even little bit blurry. But it takes far less time to load. Do not forget that the second version of the resolution and file size may be larger than 4 times the size of it is multiplied by 2 in breadth and height.
Some people think that the art direction was done srcset attribute it here because it has a hint w, h, was it done, but it certainly will not be the same as the picture element that we have to be custom. Not released to determine which web browsers, we can not guarantee that users will get the image we really intend to let him go.
Why another popular picture element for art direction is that many people do responsive web based for deeper Mobile-First (min-width), which, if we use srcset attribute, then we have to write hint principle Desktop-. First (max-width) allows breakpoints are not synchronized. But if we use the picture element, then we can use media queries at all, whether the principles of what is no problem.

Adaptive Images practical also viewed

Last webkit brought srcset attribute to implement, then the picture element is still predominate. polyfill before Some people might complain that it's all web browsers to support something new. It takes a long time Why he does not do it, the answer is a solution then becomes a joint specification proposed solution will be widely used to the idea say it is, they need to think twice. Because what is specification That means that it will be applied to the entire world on specification becomes a "recommendation" to the various web browsers, it is taken to implement it.
Actually, the people who helped to define. specifications These are not the men of anything. They would like developers like us, only that this time, they're already in trouble, he did nothing. He tried to solve the problem We're just waiting to be used to complain to me. I took the time to help them. written specification has to be better than them or not real?