QR code, also known as flash code, is a two-dimensional barcode that records information related to an item. It can be read by a QR scanner or a mobile device with a camera. QR codes can have many usages. Scanning a barcode could lead to the downloading of an application, a link to more information about about a business, or even personal usage like the uploading of one’s resume.
QR Codes are everywhere, on articles, buses, websites, billboards… It is a true form of advertising. It can be playful, luxurious, or even more dangerous. But it has not yet won its credibility in the eyes of the public. Millions of people are spending their time tweeting, pinning, checking but why not flashing?
An American blogger, Sean x Cummins surveyed 300 people on the streets of San Francisco, showing them the photo of the small square, and asking them if they knew what it was? Only 11% answered “QR code”. The others suggested anything and everything, from the korean military code to the aerial view of San Francisco
The results were similar when surveying New Yorkers. The Brooklyn Museum put a code on the back of its entrance tags that served as an introduction to what visitors might find behind QR codes throughout the building. Every visitor coming in the door gets one of these tags, but only 1.77% of visitors responded by scanning the code.
Although this mobile technology seems great and useful in providing additional content in numerous media channels, its popularity is lacking.
Here is why: We may be in 2012, but a large large number of people do not still know what QR codes represent. The reason for this lack of knowledge is the little to no communication on the technology itself. Previous launches of barcode scanners proved unsuccessful. QR codes must regild to show their great potential.
The problem remains that QR codes do not really bring interest to get flashed. The proposed contents have to bring a real added value to the product or to the communication, send back towards a simple web page without interest and not optimized for mobile bring nothing. And why not directly integrate the reader of flash codes in the camera, as a native app? Now, you must download a third application on the market of your telephone, an application which will not be integrated into your camera.
QR codes are obviously a powerful tool of communication on which it will be necessary to count in the next years. For marketers, QR codes provide a relatively inexpensive way of reaching out to consumers while still maintaining complete control of the resulting interaction. With creativity, the possibilities are endless. It only needs a big advertising campaign to ground the movement. Place your bets now.
It is an old saying- “A picture speaks a thousand words”. But not everyone can understand that language. So to make a design understandable we use code for designing.Code takes the design more near to the real product functionally/behaviorally. As in terms of professional language for a customer-“Interface is the product”. So the interface need to be interactive. And for a better interactivity a designer should design a functional layout. And to make those functional layouts functioning we use code, combination of -Markup language(HTML, XML etc.), Styling language(CSS, LESS, SASS), Scripting language(Javascript, jQuery, AJAX etc.).
There are lots of experiments, inventions that are done to give more life to designs, the mockups are now no longer used or are not enough to satisfy the customer to sell a product. No matter how much strength you put to design a beautiful template, unless it is interactive, even a group of static layouts can’t tell the whole product story. I am saying this because our interface now became more device independent, transitional and alive like a real product.
If we think of a human body, then design is skin and interface are bones, which gives shape to skin and gives it a meaningful body structure.
Let’s stop talking shit and let me show how code do magical designing…
Suppose we have a layout for which our client wants that, it should be viewed properly on all browser supportive devices. So, here comes the magic of code and we will code it once and it will work on all devices automatically. Let’s see how:
Just copy all the code and paste in a text editor and save it as, lets say test.html. And test it on browsers (advanced browsers).
There is a lot more stuff, like a new term which has evolved now a days is “RAPID PROTOTYPING“. It is something we do after design and before we start working on interface designing. The need of this is to demonstrate 20% of the actual product which users use 80% in the product most of the time.
There are many techniques to vertically center elements but all have looked some or the other way, quite hacky as developers have always been looking for an elegant solution to accomplish vertical centering.Ironically, people say CSS is easy but things like doing vertical centering has always made developers go crazy to find one elegant solution to the above problem in contrast to what they need to do for horizontal centering. Thank god, there is flexbox which has lessened the woes of developers.
What is the Flexible Box?
The flexible box layout is an alternative to grid layout in which there is no media query for particular breakpoints. Instead, it’s all about accommodating elements at a limit till which you can accommodate elements and then break it.
Flexible box gives more power and freedom to layout the structure. The child elements inside a parent container can be stacked vertically or horizontally by a difference of only one line of code. Isn’t it cool?
Flexbox layout helps developers in building responsive layouts with less of a worry about stacking things on different viewports and centering of things. Flexbox gives power to developers to lay out content as they want to be with minimal code. For e.g. if a developer wants 2 divs (i.e. A and B) to be horizontally stacked as A and B but vertically stacked as B and A. So, he/she just has to write:
Taking .wrapper as default parent class and .wrapper-list-items as its children
1) Display
Display property of Flexbox is used to tell the browser on how to layout the parent container in the flow of document of web page.
There are two possible display values: flex and inline-flex.
The only difference between the two values is that display:flex makes the parent element behave as if it has display:block property i.e. occupying full width of the web page and display:inline-flex makes the parent container to behave as if it is an inline element.
Display property is used for parent container on which we want to apply flex property and the actual layout is carried out on its child elements.
Basically, “horizontal” and “vertical” isn’t what the directions are called when we deal with flex.
These are described as main-axis and cross axis. By default, the flex-direction property is set to row and it aligns the flex-item(s) along the main axis.
The flex items are then laid across the main-axis, stacking horizontally from left to right. If the flex-direction property is changed to column, the flex-items would be aligned along the cross axis i.e. top to bottom.
3) Flex-wrap
This property defines whether the child elements should break if there isn’t enough space to accommodate all the child elements and if it’s allowed by making it wrap, then we could also change the direction in which the child elements should wrap.
“Wrap” is a fancy word to say. In simple words, when the available space within the flex-container can no longer house the flex-items in their default widths, it breaks into multiple lines.
4) Flex-flow
The flex-flow is a shorthand property which takes flex-direction and Flex-wrap values.
//wrapper is parent-container .wrapper { flex-flow: row wrap; /*direction “row” and wrap the children i.e wrapper-items.*/ }
5) Justify-content
It defines the alignment of the child elements along the main axis of the parent container. It equally distributes space among the child elements if all the child elements don’t occupy 100% space along the main axis of parent container.
The justify content property defines how flex items are laid out on the main axis.
Justify content has 5 values to work upon:-
//wrapper is parent-container .wrapper { justify-content: flex-start / flex-end / center / space-between / space-around }
6) Align-items
This property defines how Flexbox items are aligned according to the cross axis, within a line of a flexbox container. So, if the flex-direction is row by default so the cross axis is perpendicular to the row.
Align-items can take any of the below 5 values:
1) align-items: flex-start; – The Flexbox items are aligned at the start of the cross axis.
2) align-items: flex-end; – The Flexbox items are aligned at the end of the cross axis.
3) align-items: center; – The Flexbox items are aligned at the center of the cross axis.
4) align-items: baseline; – The Flexbox items are aligned at the baseline of the cross axis.
5) align-items: stretch; – The Flexbox items will stretch across the whole cross axis.
Code: //wrapper is parent-container .wrapper { align-items: flex-start || flex-end || center || baseline || stretch }
So, above are some of the basic properties of Flexbox that I’ve covered which will atleast give you a head-start of Flexbox.
But as the saying goes – ‘With great power, comes great responsibility’, we should have a clear mindset as to when to use Flexbox for our layouts.
Here are some complexities related to using Flexbox-
Don’t use Flexbox for page layout. Flexbox is more powerful for laying out structure of components but not for a full web application. For laying out the structure of the page, it’s still a better practice to use grid system and then we could use Flexible box to layout components and their child elements.
Flexbox has come to make our lives easier, not difficult. We know it’s easy to layout elements inside a flex container but we shouldn’t overuse it if it could be done in more simpler ways. For example- to center text inside a span, we shouldn’t go for flex layout as there are much simpler ways to do it. So why complicate simple things?
Don’t use Flexbox if you need to support older browsers like IE-8 or IE-9 as support for Flexbox is present only on IE-11 and above. So, backward compatibility is a big issue for Flexbox.
