Is your company UX compliant?

Standard

Image

I think “User Experience is not only the design process, it is actually the methodology/strategy which we should follow throughout the length and breadth of project and which involves all the stack holders”. I had recently gone through a nice banner designed by Hello Erik and he named it as UXisnotUI. He had nicely explained what UX is actually and who the stackholders are. I took a print of same banner and pasted on my desk board; many of my colleagues stop by and read from it and many had asked for copies. I think it is serving the purpose and many thanks to Hello Erik!

User Experience is not only the baby of design studio of your company, it is equally the baby of all the departments of your company who should all first know the purpose of it, learn it, understand it, explore it and follow it. When your company is making good steps to accept UX as essential thing to know the user empathy that is when the design thinking is taking birth. If we explore different IT companies you will definitely find they had put the burdens of UX to a single design team and making them solely responsible. Go through the job descriptions of these companies, the title of JD is different, content is different and when you actually go for an interview they mean it different and if luckily you clear the interviews, you are being asked to do different.

I feel it is the general problem of industry which lacks the understanding of UX, if I am wrong in saying that, it is the problem near me. I am trying to highlight some steps which can help companies to make them UX compliant and the assumption is companies have small or large UX team.

 

  1. Make your Marketing Team UX compliant

Those clients who ask for project design/development services and are giving highest priority to UX, automatically you should know as a service provider that your client knows/cares more about his users than you would have expected. Secondly you should also know that this project can’t be signed off on quote competitiveness, even though it could be the last pitch. These deals can be won by having a good track record of delivering the services which had touched the excellence in Design, Development and delivery.

Marketing team is first source which are in hunt of some project leads and making the first contact with clients, where in they talk about companies core competence, successes delivered, difference they make and how they are going to change the client imagination into reality. If your marketing team doesn’t have the knowledge of User Experience, how you could expect them to get some great projects. They are the first who talk about the tit bits of UX with client and if they are successful in convincing them, then the discussion is broadened with respective team of expertise. I think this is the first department which should be made UX compliant. The UX team has to work hard to educate them about User Experience and make them aware about different process and the positive points where you are competent. Make promises of those things only where you have strong hold and can demonstrate better.

The true essence of UX should be reflecting from all the sources of company like from branding, print materials, presentation decks, company portals/websites/apps, ambience, infrastructure, processes, trainings etc. 

I don’t know how it makes sense to sell the UX services and feel proud of when in-house experience are in shambles.

When I say marketing team it includes your branding team, Sales Team, Pre-sales team etc.

 

  1. Make your HR Team UX compliant

To deliver extra ordinary products/services you should be having extraordinary resources who would work on these projects. When you have the project, you would look for the appropriate resources and would check with the HR if any are present or should you go for recruitment. The recruitment team are the first persons who search the candidates in the market and call them and have initial talk. They should be well aware about what they are looking for, recruiting for and the purpose of new recruitments. It is always good suggestions given to the interviewers to recruit someone who knows better than you. Otherwise if HR team start searching by simple expertise tag lines, then it would be loss of time for both interviewers, candidates, team for which recruitment process is started and holistically loss of time and money for company.

Therefore UX team has to make sure that the HR team knows what the requirements are and what should be the core competence. There should be some talks arranged where in HR team can come and know some of the tit bits of UX, Project requirements , technical requirements etc.

 

  1. Make your Development Team UX compliant

As Cap Watkins rightly mentioned in his article “User Experience Belongs to Everybody” that it is not the only job of Designer to be UX compliant, it is actually the shared responsibility of all team members to know it, and adhere to it. It really doesn’t make sense to have jazzy UI, while still the backend queries fail at times. It doesn’t make sense to have nice animations, while the data takes hell lot of time to load. The Development team should know as much about the user empathy as much as UX team should know. They should take steps to write good code, which is well maintained, well documented, and reusable. They should take extra care about seamless flow of interactions of the application and its performance.

I will quote from the same Cap Watkins article that

“It would be easier to compromise and ship something that is just barely good enough, fast enough or clear enough. We’re told time and again to ship early, ship often. But shipping small and fast does not mean shipping half-baked, incomplete, compromised. It means shipping the smallest, best iterations to get to where you want to go. And that requires all of us. It means doing a bit of extra work to make sure your page loads are fast, that animations are quick and smooth, that the flow is sensible, line-height is just right and your feature announcements are awesome. It means everyone sweating the details of their piece of the user experience. Because that’s the only way – together – that we can make our products awesome.”

 

  1. Make your QA Team UX Compliant

The QA team is very essential for any great project and have got lots of responsibility to release any rock solid project. Actually the last resort of customer trust lies on QA team. It is the same team which uncovers some of the small/large mistakes which sometimes we easily ignore or hides from our eyes. It is the same team which makes sure to drag all the teams towards the excellent quality standards. UX team should not live without sharing some of the nuts and bolts of UX with this team. QA team should know in actuality the customer requirements including some of the essentialities for which clients are looking for.

 

  1. Last but not the least

The responsibilities of UX team is much more and they sometimes have to find the gaps which create the confusion with in the teams. They have to make sure entire team knows the purpose, understands it and the benefits it will bring for the team and the users. UX team should always be updated with the latest happenings of the technology world and the user experience which tend to change with time and technology. There is no hurry in UX, but the excellence which is always expected from it. UX team should make sure there is timely knowledge transfer across the teams and arrange the necessary meetings/talks which will help them to be in sync and work as one team and demonstrate excellent piece of collaboration.

Why end user license agreements (EULA) have bad User Experience?

Quote

History is testimony to the fact and so are the analytical figures that hardly any end user reads software license agreements. It is being said that less that 8% of end users spare some time and patience to read the license agreements and rest of the 92% hardly bother.

· Is it that users are curious to install the software or get a service as quickly as possible and see what underthehood is?

· Is it the length of the agreement or complex wording for which one needs to hire a legal expert to understand it fully?

· Is it the time constraints which follows a user all over his life?

If you ask me? I would sincerely express that I had tried many times to read license agreements to understand them, but every attempt was a failure. I never found them intuitive, user friendly, interesting, easy to understand and what is highly shitty about them is time consuming and lengthy.

But what is nightmare to us now, is definitely giving us window to dig deep into this puzzle and try to resolve this and make history.

If you are reading/watching news daily like me then it is not hard to remember that latest happenings in the world regarding user privacy issues which had grabbed the attention of people around the world. From Facebook/Google/Microsoft to NSA/Snowden leaks, people are clear that their user privacy had been compromised and when same is being challenged in the courts. It had been found hardly any user had read the agreements before accepting.

It is not the fault of the users who are not reading the license agreements and later found themselves in trap. It is the fault of BAD User Experience of license agreements.

No more than 8% of users read the License Agreements in full.

Every one of us know how much is being written, read, trained and widely acclaimed about User Experience. User Experience had resolved lots of complex puzzles and therefore giving more freedom, contextual approaches,user friendly and every thing which makes sense.

I therefore request your great attention and patience to let us think about it and let us share the ideas, and work on it as a common goal. Our mind is the ocean of ideas, whether good or bad, whether small or big. Sometimes small idea acts as catalyst for a big idea and I am sure we lack any.

So let us put our IDEAS forward!

Why Do Muslims Fast during Ramadan?

Standard
Muslims opening the fast by taking dates and water in Masjid.

Muslims opening the fast by taking dates and water in Masjid.

As muslims prepare for the age-old annual compulsory one-month fast, this article looks closely at some of the reasons why muslims do Ramadan fast. It also traces the history of fasting in Islam.

History of Ramadan Fast

What turns out now to be a compulsory annual event (i.e fasting during the month of Ramadan by all able-bodied muslims) started in the early years of Prophet Muhammad (s.a.w) in Medina, precisely in the second year of Hijra. Prior to his flight to Medina (known as Hijra), the Prophet(s.a.w) was in the habit of fasting three times per month (this gives 36 days in a year) when he was in Mecca and to a great extent when he settled in Medina. Not long, the Prophet(s.a.w) soon discovered that the Jews in Medina used to set aside one special day for fasting. By Islamic lunar calendar, the day used to be 10th of Muharram, often called yawmu :ashura. The Prophet(s.a.w) then asked the Jews about the significance of the day. He was told that it is the day Allah helped Prophet Musa(a.s) to humiliate, defeat and drown the tyrant, Fir’aon. By all standard, since Musa(a.s) was a prophet of Allah and of course a muslim, the Prophet(s.a.w) felt that Musa(a.s) was nearer to him as a Prophet (as well as to the muslims) than to the Jews. To this end, he ordered his companions to fast along with him that day.

Narrated Ibn ‘Abbas(r.a): When Allah’s Apostle(s.a.w) arrived at Medina, he found the Jews fasting on the day of ‘Ashura. The Prophet(s.a.w) asked (about it) and they replied: “This is the day when Moses(a.s) became victorious over Fir’aon”. The Prophet(s.a.w) said (to the muslims), “We are nearer to Moses than they, so fast on this day” (Sahih Al-Bukhari, vol.6, p.233)

The Prophet(s.a.w) also sent a companion to go round Medina to announce to all the muslims that whoever has eaten should fast for the remaining hours of the day and whoever has not eaten should fast for the day (see Sahih Al-Bukhari, vol. 3, hadeeth 181, p. 103). It is evident that ‘Ashura fast was the first communal fast made obligatory for the muslims by the Prophet(s.a.w) whereas his own habit of 3-day-fast-per-month remained optional.
The All-knowing Allah formally revealed two verses regarding fasting in the second year of Hijra: the verses spelt out the reasons for fasting; when to do so; who should be exempted? etc. Let’s see the verses:

“O ye who believe, fasting is prescribed for you as it was prescribed for people before you so that you will (learn how to attain) piety” (Q2:183)

“(fasting is) for a fixed number of days: but if any one of you is sick, or on a journey, the prescribed number (should be made up) from (other) days later. For those who can do it (with hardship) is a ransom, the feeding of one that is indigent. But whoever can give more (than this) of his own free will–(then) it is better for him, and it is better for you that ye fast, if ye but knew.” Q(2:184) When these two verses were revealed, ‘Aisha(r.a) reported that the Prophet(s.a.w) then said to the muslims: “Ramadan fast is a divine obligation but whoever likes to fast ‘Ashura day (as well) may do so voluntarily or leave it”. Undoubtedly, Ramadan fast is a blessing to the muslims in the sense that from one-day ‘Ashura fast, Allah gave them a whole month of Ramadan instead. Ramadan may be 29 or 30 days depending on when the moon was sighted.

A cursory look at the qur’anic verses above reveals that the All-wise intend ease for the muslims and not difficulty: for instance, ransom was allowed for those who choose not to fast due to hardship or difficulty. This freedom or leniency was shortlived when the All-wise and the All-knowing Allah tightened His injunction with another revelation that nullified giving ransom, by able-bodied muslims, in exchange for missed Ramadan fast thus:

“Ramadan is the (month) in which Qur’an was sent down, as a guide to mankind, and a clear guidance and judgement (so that mankind will distinguish right from wrong). Whoever among you witnesses the month of Ramadan should fast through it. But whoever is sick or on a journey, the prescribed period (missed should be made up) by days later. Allah wants ease for you and He does not want to put you into difficulties. (He wants you) to complete the prescribed period and to glorify Him in that He has guided you; and perchance ye shall be grateful” Q(2:185).

This verse shows that Allah wants every able-bodied muslim to “complete the prescribed period” (30 or 29 days depending on when the moon was sighted). It infact re-emphasises the importance of Ramadan fast which Allah made clear in the last part of Q(2:184) where He said: “…it is better for you that ye fast if ye but knew”. Unambiguously, feeding of the poor person as a ransom for not fasting (by those who can fast) is not allowed by Q(2:185). This is the genesis of Ramadan fast in Islam.

Remarkably, it is clear that ‘Ashura fast was replaced by Ramadan fast, but the habit of fasting 3-day-per-month which the Prophet(s.a.w) used to do was a blessing in someway because his 36 days a year fasting can be interpreted thus: Allah approved 30 days as FARD (i.e obligatory) for the month of Ramadan, and the Prophet(s.a.w) recommended six days fasting in the month of Shawwal for all muslims (though this is voluntary). If these two fastings are adopted, one would have done 36 days (which is the same as fasting round the year).

The practice is intended to help teach Muslims “self-discipline, self-restraint and generosity”

Rest Almighty Allah knows best!

Some Important Links

About Ramadan

Ramadan FAQ’s

Health benefits of Ramadan

Important FAQ’s about Islam

A Date with #GoogleGlass

Standard

google-glass-hd-wallpaper

Today I am going to introduce you with Google’s latest flagship product/project namely as GLASS. If we ask Google to tell us about Google Glass they say “It’s surprisingly simple”, not bad and not contrary to its age old mantra which is simplicity at its core. As Google clearly mentions and believes in that when people comes to Google they come for definite meaningful purpose which is to get some INFORMATION. If we read 10 points of Google philosophy we will get more information and their deep love in simplicity. If we consult their recent revamp of design, one comes to think that Google could have created much better and jazzy UI for their products, but yet they have followed their philosophy and love of simplicity which clearly reflecting from its design. Let us see how it feels when wearing a GLASS.

To be frank enough Google Glass app is not a mobile app or website on a transparent background. To understand fully we have to read some technical specification of Glass and go through Google Glass quick guide.

Some of the important ideas nicely written by Max Firtman in his blog post on mobilexweb.com are:

Important Ideas:

  • Users don’t browse the web on Glass (well, they can ask questions to Google but there is no API for that yet)
  • Users don’t install apps, they authorize just Glassware to communicate with the device as we authorize a website/app to access our Facebook/Google+ account
  • We need to let the user decide when to access your services and data, we should not force the user to read what we have to say
  • Create an specific and optimized architecture for Google Glass
  • While everybody thinks on Glass with AR (Augmented Reality), today the device is not offering AR features. We can send contextual information, images and videos to user’s device but we will not augment the reality on user’s vision.
  • It’s not a mobile replacement; it’s not a desktop replacement. It’s a new and different kind of device.

The base interactional screen of Google Glass are called as Google Cards and the apps specifically designed/developed for GLASS are called as GLASSWARE. The Glass resolution is nHD display of 640/360 [1/9th of full HD]. Google Glass had 5MP camera, conduction transducer audio, accelerometer, a touch lateral panel, Bluetooth, WIFI etc. For more information about the specifications refer to Google Glass tech specifics.

Google Glass Cards can be created using:

  • Plain text
  • Text + Media (Images, Video, Audio)
  • HTML5

And there are lots of Glass cards templates available and had been recommended by Google to go through those before creating your new card. For more information related to Google Glass UI guidelines.

Google had provided online emulator for Glass for those thirsty developers who want to see how Glassware looks in glass and for those thirsty buyers who want to buy one but unfortunately Google had stop to ship any more as they had already reached to the limit. Let me inform potential future buyers of Google Glass that Google has priced it around $1500 and as per the policies they are selling it to single person and that person is not allowed to lend it to any of his friend(s) or any family member. Google has equal right to cancel the account of that person who would be found violating the Google Glass policies.

Weird #GoogleGlass

Google had shipped lots of Glasses to the explorers and many different feedback are coming from those fortunate users, some are bad and some are good and its release and their experience had unfolded the Pandora box of questions that curiously needs some convincing answers from Google. Some one nicely concluded Google Glass as “New child in technology arena” which has still to learn and still to explore before it greatly mesmerizes the users. Mike Butcher pened down his experience with Google Glass [Did I mentioned that during this experience he had already violated Google usage policies..?] had mentioned the same thing that Glass needs to learn lot and update lot before it creates ripples in the technology market.

Important Links:

Official documentation: https://developers.google.com/glass

API and starter projects: https://developers.google.com/glass/downloads

Playground (card simulator): https://developers.google.com/glass/playground

Redesigning SAVE symbol

Standard

After checking some updates on my phone I came through an interesting Twitter post which discussed about “Redesigning SAVE symbol” and when I clicked, it redirected me to one of the interesting branch on branch.com. Many people had already shared their ideas/thoughts which helped lot to make this subject interesting and convinced me to take some time to think on this interesting subject.

It is very much true that the age old floppy symbol to signify save icon is very much out dated. New techies are not too much familiar with floppy disks and their working. Time has come when we should try to design something interesting, something unique which stays there for very long.

I thought it is interesting challenge and accepted this very energetically even when I was checking the post on my bed that too on LAZY Sunday.

Many geeks of Experience Design put their thought forth which are really great and makes achieving this challenge interesting. When Andrew Crow of GE says “Let us do it” I said “Why not!”

Many had shared their designs and I would frankly say that those symbols which had been designed in circular shape resembles to that of reload symbol, data pre-loader symbol & refresh symbol.

I grabbed my grid book, pencil, eraser & sharpener and started to design. SAVE was echoing in my mind repeatedly and I came up with this design which is saved state of save symbol.

First Try

First Try

Second Try

Second Try

I created symbols for states

  • Saved State
  • Unsaved state
  • Auto save
  • Cloud save
  • Cloud unsaved

and respective wire-frames

Wireframe 3

Wireframe 3

Wire-frame 4

Wire-frame 4

Let me show you the mock-up which I created in Illustrator and symbols with respective description.

Illustration 1

Save symbol Illustration 1

And some changes in shield.

Save symbol Illustration 2

Save symbol Illustration 2

Best work has not been started — Best job has not been done 

The search of excellence never ends here, the struggle will continue and the future updates will be updated on this post accordingly.

Global Style Sheet

Standard

Hi Friends,

Today I am gonna to share with you a style file which I feel are including some of the classes/styles which we almost use in every web project on which we are working. We are repeating writing the same code across different web projects, if you are not but atleast i am doing the same. :)

Today after getting some time I thought why not to make a general style sheet which will contain some of the common styles which we require almost in all projects. Atleast we can save some time and our patience. Let me show you all the styles code in that file first and then explain each one of them.

*
{
padding: 0px;
margin: 0px;
}

BODY, HTML
{
height: 100%;
width: 100%;
}

BODY
{
font-family: 'Arial' , 'Helvetica' , 'Sans-Serif';
font-size: 12px;
color: #323232;
}

img
{
border: none;
}

a
{
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
/*------ For Clear ------- */
.clear
{
clear: both;
}
.clearLeft
{
clear: left;
}
.clearRight
{
clear: right;
}
/*------ For Floats ------- */
.floatLeft
{
float: left;
}
.floatRigth
{
float: right;
}

/*------ For Border Radius ------- */
.borderRadius
{
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
}

/*------ For Box Shadow ------- */

.boxOuterShadow
{
box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-moz-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-o-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-ms-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
}

.boxInnerShadow
{
box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-webkit-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-moz-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-o-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-ms-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
}
/*------ For Text Shadow ------- */

.textShadow

{
text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-webkit-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-moz-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-o-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-ms-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
}
/*------ For Color Gradient ------- */

.colorGradient
{
background: #a6a6a6; /* Old browsers */
background: -moz-linear-gradient(top, #a6a6a6 1%, #eaeaea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#a6a6a6), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a6a6a6 1%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a6a6a6 1%,#eaeaea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a6a6a6 1%,#eaeaea 100%); /* IE10+ */
background: linear-gradient(to bottom, #a6a6a6 1%,#eaeaea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6a6a6', endColorstr='#eaeaea',GradientType=0 ); /* IE6-8 */
}</pre>
/*------- For flexible images ----*/

img {
 max-width: 100%;
 height: auto;
 width: auto\9; /* ie8 */
}

&nbsp;

/*------- For flexible videos ----*/

video embed,
video object,
video iframe {
 width: 100%;
 height: auto;
}

&nbsp;

/*------- Adjust text size in iPhone ----*/

html {
 -webkit-text-size-adjust: none;
}

&nbsp;

/*------- Adjust overflow in 100% width (if padding applied) ----*/

.boxSizing
{
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
 box-sizing:border-box;
}

&nbsp;

By simply going through the above code you might had got the idea what i am trying to do by making the general style sheet file. Basically I have tried to separate those common/repetitive styles from the general style file and then saving them separately as commons.css file. Later on I can link this style sheet to any web project/file and do some color and font settings as per the requirements and use the same as and when I require them. I know I haven’t as yet put all the possible commonalities inside this style sheet and would definitely update this sheet as and when i find anything which should be in this file. I am also humbly requesting you friends to kindly suggest and update this files if you find any interesting style which should become part of this file. Let me explain all the styles and their functionality one by one First i have wrote global browser resetting style, which goes like this

*
{
padding: 0px;
margin: 0px;
}

The above style helps to reset different browser specific style settings. Star (*) means all the DOM elements and set their padding and margins to zero(0). I would also like to inform here that it is not the recommander way to reset the browser, rather we have a good approach which is from YAHOO. 2nd style tends to set all webpage HTML, BODY element height and width to 100%. This depends on your project requirements and you can edit the code as per the requirements. The code looks like this

BODY, HTML
{
height: 100%;
width: 100%;
}

3rd style is the general BODY element. It is my usual practice to define the general font styles in body tag and specifically changing the font style properties where ever is required. The code of which looks like this

BODY
{
font-family: 'Arial' , 'Helvetica' , 'Sans-Serif';
font-size: 12px;
color: #323232;
}

4th style is to reset the <img> tag and set its border property to none, as i had seen many browsers unnecessarily showing the blue border across the image.

img
{
border: none;
}

5th styles is to keep the general and modern style look and feel of links. By default there won’t be any underline and on hover link will show the underline and this also helps in user experience.

a
{
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}

6th styles is to clear the floating of divs

.clear
{
clear: both;
}
.clearLeft
{
clear: left;
}
.clearRight
{
clear: right;
}

7th style is for floats. If you want any div to float left or right, you now need to just add the appropriate class to that div.

.floatLeft
{
float: left;
}
.floatRigth
{
float: right;
}

8th styles talks about border radius which we commonly use across different divs and have to tirelessly write browser specific code across the divs. You can add border radius to any div to which you want border radius, simply you have to just add this class to that div in markups. This code of which is like this.

.borderRadius
{
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
}

9th style is to add box shadow to the divs, both inner and outer shadows. Code to add outer shadow looks like this

.boxOuterShadow
{
box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-moz-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-o-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-ms-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
}

and code for inner shadow looks like this

.boxInnerShadow
{
box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-webkit-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-moz-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-o-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-ms-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
}

10th style is to add shadow to the text.

.textShadow
{
text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-webkit-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-moz-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-o-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-ms-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
}

11th styles is for color gradients. Designers/developers can change the color values and get the desired color as per their requirements.

.colorGradient
{
background: #a6a6a6; /* Old browsers */
background: -moz-linear-gradient(top, #a6a6a6 1%, #eaeaea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#a6a6a6), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a6a6a6 1%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a6a6a6 1%,#eaeaea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a6a6a6 1%,#eaeaea 100%); /* IE10+ */
background: linear-gradient(to bottom, #a6a6a6 1%,#eaeaea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6a6a6', endColorstr='#eaeaea',GradientType=0 ); /* IE6-8 */
}

</pre>
/*------- For flexible images ----*/

img {
 max-width: 100%;
 height: auto;
 width: auto\9; /* ie8 */
 box-shadow:inset 0px 0px 5px #E88738;
}
<pre>

The above code helps to make images responsive in responsive design.

</pre>
/*------- For flexible videos ----*/

video embed,
video object,
video iframe {
 width: 100%;
 height: auto;
}
<pre>

The above codes makes videos responsive in responsive design.


</pre>
/*------- Adjust text size in iPhone ----*/

html {
 -webkit-text-size-adjust: none;
}
<pre>

The above code does text adjustments in webkit supporting browsers for iPhone devices.


</pre>
/*------- Adjust overflow in 100% width (if padding applied) ----*/

.boxSizing
{
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
 box-sizing:border-box;
}
<pre>

Box-sizing is interesting CSS3 property. When we apply padding to a div whose width is 100%, its width start to increase, in-order to keep it 100% and have some padding, we should include box-sizing property into the divs code.
Please note as i already mentioned this is not the end of the styles which can be put in this file, as and when i come up with other style snippets which i feel should be in this file shall be definately updated, in the same breath i am requesting you all friends to suggest few if you feel we can make this file much usable and interesting. Thanks in advance and enjoy reading.

HTML5 Tags

Standard

Asalamu Alaikum Friends!

Today i am going to talk about HTML5 tags, YES! not all but few which really interests me lot or those tags which if done in simple CSS2 will really take out lots of sweat.

As per the w3schools.com, they give the brief introduction of HTML5 like this:

and if we dig deep we see the browser compatibility like this:

HTML5 Browser Compatibility

It is really awesome, but yeh! compatibility is the issue which some times really frustrates, but don’t worry almost all the browers are updating and soon you will see a great support of HTML5 across the browsers and one more thing IE10 is coming soon and as per the news Microsoft says it will surprise all. Now let us wait for the original release and till then you can test drive it.

OK, I think it is enough intro let me show you the tags which really interests me.

<details></details> & <summary>,/summary> tags. [currently support in Chrome only]

Let me write a small snippet of it and show you how it Looks:

summary
{
    background-color: #3084BD;
    border: 1px solid #2A94CD;
    box-shadow: 2px 2px 10px #03448A inset;
    color: #fff;
    font-family: Segoe UI Light;
    font-size: 15px;
    padding: 7px;
    cursor: pointer;
}

details
{
    width: 90%;
    margin: 10px auto;
    background-color: #f7f7f7;
    border: 1px solid #eaeaea;
    padding: 2px;
    font-size: 12px;
}

and some support css code (Please note it is not part of the above tags, it is just for over all look and feel)


*
{
    padding: 0px;
    margin: 0px;
}

body
{
    width:90%;
    margin:auto;
    font-family: Segoe UI;
    color: #323232;
}

p
{
    padding: 10px;
}

h1
{
    color: #a3a3a3;
    font-size: 40px;
    font-weight:normal;
    padding:10px 0;
    text-transform:uppercase;
}

and complete CSS code


*
{
    padding: 0px;
    margin: 0px;
}

body
{
    width:90%;
    margin:auto;
    font-family: Segoe UI;
    color: #323232;
}

summary
{
    background-color: #3084BD;
    border: 1px solid #2A94CD;
    box-shadow: 2px 2px 10px #03448A inset;
    color: #fff;
    font-family: Segoe UI Light;
    font-size: 15px;
    padding: 7px;
    cursor: pointer;
}

details
{
    width: 90%;
    margin: 10px auto;
    background-color: #f7f7f7;
    border: 1px solid #eaeaea;
    padding: 2px;
    font-size: 12px;
}

p
{
    padding: 10px;
}

h1
{
    color: #a3a3a3;
    font-size: 40px;
    font-weight:normal;
    padding:10px 0;
    text-transform:uppercase;
}

and now let me show you how its HTML code looks like:

<details>
<summary>Shabir Gilkar</summary>
<h1>About Me!</h1>
<p>I am Shabir Gilkar from Srinagar Kashmir, now shifted to Bangalore India.</p>
</details>
    <details>
<summary>What i do?</summary>
<h1>I m doing</h1>
<p>I am working as Sr. Graphics Designer in Aditi Technologies Bangalore, You can reach me at shabirgilkar@gmail.com</p>
</details>

and it display like this, It is almost like accordion.

and next tag about which i would like to discuss is <mark></mark> tag. It is used to highlight any section in sentence.
To make it little interesting i had wrote little css to it. It had support in almost all the latest browsers

mark
{
    padding: 2px;
    border: 1px dotted orange;
}

and the HTML code for this:

Do not forget to get <mark>Milk</mark> from market...!!

and when we display the same in browser it looks like this:

I hope you  all like the above discussed tags and i am looking forward to update this post as i pass through while learning it. Please post your comments/suggestion, and i will be more than happy to receive them. Thanks in advance!