Who doesn’t love Post-it notes? In my previous life, before I started learning CSS, I would ask myself “how can I make a convincing looking Post-it note in Photoshop?” After extensive CSS study and research I have come to realize that some things can be done with CSS alone. That’s right, the post it you see on the right is 100% CSS. Go ahead, check it out. Here is how it is done.

I broke the instructions up into key elements so the uninitiated can get a feel for how I constructed everything. The process itself might be helpful for some people – it was certainly helpful for me. If you aren’t interested in my life story, feel free to skip to the end for a quick ‘plug and play’ code snippet.

Making the Post-it

margin: 25px;
width: 250px;
min-height:175px;
max-height:175px;
padding-top:35px;

This is the basic square that will be built around your content. The height is somewhat complicated because I want the text to begin lower on the Post-it rather than at the top. To ensure the padding doesn’t add any height while still lowering the text, set a min and max parameter on the height.

The Yellow Color

background: rgb(255,255,136); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(255,255,136,1) 77%, rgba(255,255,214,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(77%,rgba(255,255,136,1)), color-stop(100%,rgba(255,255,214,1))); /*Chrome,Safari4+*/
background: -webkit-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* IE10+ */
background: linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

This is where much of the magic happens. When you think of a Post-it note you probably think of yellow, right? It’s true, but we need to think in 3D terms. It needs a yellow gradient that fades at a 45-degree angle into a slightly lighter color at the bottom right. This will help with creating a “peeled up” illusion later on. I just used this amazing tool (http://www.colorzilla.com/gradient-editor) to make mine. This code looks like a huge mess, but it’s mostly due to cross-browser support. Speaking of cross-browser support, Internet Explorer 6-9 does not like diagonal gradients so this website provides a nice fallback and converts our diagonal gradient into a horizontal gradient. This is not optimal so I recommend changing the last line of code here:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Either make startColorstr and endColorstr the same number (which will turn off the gradient and make the Post-it a solid color) or change GradientType from 1 to 0 (this will make the gradient vertical instead of horizontal). I chose to remove the gradient.

border:1px solid #E8E8E8;
border-top:60px solid #fdfd86;

I am doing something special with the border. You could easily give this a 1px light grey border and it would look fine, however, Post-its have that sticky glue-like substance on top that, when in use, has a slightly different look than the rest of the Post-it. I created a thick top border that is nearly the same color as the yellow I used. The effect is so slight you almost can’t tell it’s there, but anyone who does will surely appreciate it.

Font Styling

font-family:'Reenie Beanie';
font-size:22px;
text-align:center;

This is my font styling. Consider putting a script font on your post it, something like Marker Felt or Comic Sans, or preferably something interesting from the Google Font API like Reenie Beanie seen here.

A Peeled Corner

Although Post-its are square, the bottom corners tend to peel off the surface a bit when stuck to something. This 3D effect is subtle, but adds a ton to the feel of the note. This is the code to make only the bottom right corner look peeled for most browsers. As usual, sorry IE users

-webkit-border-bottom-right-radius: 60px 5px;
-moz-border-bottom-right-radius: 60px 5px;
-o-border-bottom-right-radius: 60px 5px;

And there we have it. The final code for the Post-it class looks like this:

.postit {
  text-align:center;
  width: 275px;
  margin: 25px;
  min-height:175px;
  max-height:175px;
  padding-top:35px;
  position:relative;
  border:1px solid #E8E8E8;
  border-top:60px solid #fdfd86;
  font-family:'Reenie Beanie';
  font-size:22px;
  -webkit-border-bottom-right-radius: 60px 5px;
  -moz-border-bottom-right-radius: 60px 5px;
  -o-border-bottom-right-radius: 60px 5px;display:inline-block;
  background: rgb(255,255,136); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(255,255,136,1) 77%, rgba(255,255,214,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(77%,rgba(255,255,136,1)), color-stop(100%,rgba(255,255,214,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* IE10+ */
  background: linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=0 ); /* IE6-9 fallback on horizontal gradient */
}

I know what you are thinking. Where is the shadow? Well, the shadow is actually a different piece of CSS. We’re doing more than simply adding a box shadow around the note. We could do that, but then it would look like the Post-it is floating rather than stuck on the wall.

Creating a non-box shadow is a bit of a workaround. We are actually going to be making a shape, giving that shape a shadow, and carefully adjusting that shape/shadow so only about 5% of it is visible. Sounds easy, right? I used this website to fine tune my effect (http://www.wordpressthemeshock.com/css-drop-shadow). It took me some playing to get it right, but I am happy with the result.

The Bottom Corner Shadow

content: "";
width:125px; height: 25px;
-moz-transform:skew(10deg,10deg) translate(-45px,-15px);
-webkit-transform:skew(5deg,5deg) translate(-45px,-15px);
-o-transform:skew(5deg,5deg) translate(-45px,-15px);
transform:skew(10deg,10deg) translate(-45px,-15px)

Here is our shape. It’s a long rectangle that has been skewed to have more acute angles.

position:absolute;
right: 0px; bottom:9px;
z-index: -1;

This positioning hides the box behind our Post-it and makes sure it stays underneath. I ran into an interesting problem when using this on a template sites like the one you are on now. The negative z-index actually put the shadow behind the background, making it invisible. I am not sure if this will be the case on other CMS sites, or other templates, but to get around this problem you simply need to give your background a z-index of 0.

background: rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40);
  -webkit-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40);
  -o-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40);
  /* box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40); */

Finally, the shadow. It takes a bit of tweaking to make it show up just right. Also you might have noticed that box-shadow is commented out. This is the IE workaround. IE doesn’t support rotation or skew so the shape that is actually making our shadow doesn’t cast the correct shadow. Without a box-shadow, it is just hidden under the yellow not not bothering anyone. The shadow website I provided above wants you to put together your inline code in a funny way. After you wrap your content in the .postit class, you need to make another empty div just to hold the box shadow. Like this:

<div class="postit">
Here is my postit content
<div class="cornershadow">
</div>
</div>

That is a bit clunky and I always want to do less inline work, so I put my own spin on things. Instead of making a separate class for the cornershadow, which would look like this:

.cornershadow {
  content: "";
  position:absolute;
  z-index:-1;
  right: 0px; bottom:9px;
  width:125px;
  height: 25px;
  background: rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40);
  -webkit-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40);
  -o-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40);
  /* box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40); */
  -moz-transform:skew(10deg,10deg) translate(-45px,-15px);
  -webkit-transform:skew(5deg,5deg) translate(-45px,-15px);
  -o-transform:skew(5deg,5deg) translate(-45px,-15px);
  transform:skew(10deg,10deg) translate(-45px,-15px)
}​

…I used the psuedo class :after to simply put the cornershadow code after all postit class divs! So now all you need to do is make a div class=”postit” and put whatever you want in it!

The complete code:

.postit {
  text-align:center;
  width: 275px;
  margin: 25px;
  min-height:175px;
  max-height:175px;
  padding-top:35px;
  position:relative;
  border:1px solid #E8E8E8;
  border-top:60px solid #fdfd86;
  font-family:'Reenie Beanie';
  font-size:22px;
  -webkit-border-bottom-right-radius: 60px 5px;
  -moz-border-bottom-right-radius: 60px 5px;
  -o-border-bottom-right-radius: 60px 5px;display:inline-block;
  background: rgb(255,255,136); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(255,255,136,1) 77%, rgba(255,255,214,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(77%,rgba(255,255,136,1)), color-stop(100%,rgba(255,255,214,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* IE10+ */
  background: linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=0 ); /* IE6-9 fallback on horizontal gradient */
}

.postit:after {
   content: "";
  position:absolute;
  z-index:-1;
  right: 0px; bottom:9px;
  width:125px;
  height: 25px;
  background: rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40);
  -webkit-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40);
  -o-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40);
  /* box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40); */
  -moz-transform:skew(10deg,10deg) translate(-45px,-15px);
  -webkit-transform:skew(5deg,5deg) translate(-45px,-15px);
  -o-transform:skew(5deg,5deg) translate(-45px,-15px);
  transform:skew(10deg,10deg) translate(-45px,-15px)
}

And the inline code:

<div class="postit">Check out this Post-it <br /> It's 100% CSS!</div>

If you want to further increase your Post-it fun consider separating the colored gradient and borders into its own class, naming that class .yellow. Then create a class for other Post-it colors like .blue, .pink, .orange, and so on. That way you get to name your div class=”positit pink” and get different colors. You can also give your Post-its a rotation (like the one I have at the beginning of this post) by wrapping it in a div and giving that div rotate transformation.

Governor Mark Dayton speaks with MentorMate CEO Björn Stansvik

MentorMate got involved in the program by providing an iPhone developer as a tutor to assist David, a student in the special education program at South Education Center with his iPad application. David’s app allows students with special needs to easily create, edit, and store music playlists.

David demonstrates his iPad application for the Governor

When MentorMate tasked me with redesigning our business card I was given a single, simple instruction:

“Make our business card explain what our company does.”

“Custom software development” is what we do. Could I just write that and make it work? I tried several configurations and nothing looked right. It just cluttered up the design. Also, custom software development is not descriptive enough to fully explain what MentorMate does. Do we work with web software, desktop or mobile apps? Do we offer any other skills in additional to custom software development? MentorMate does all of those things, but a simple label cannot say it all. That sentence does not leave a lasting impression. I needed a better way to explain what we do at MentorMate in a way that people could understand and internalize.

Working Backwards

A realization occurred while I was sitting at my computer. I have Adobe Photoshop, Illustrator and InDesign icons on my desktop. Adobe CS5 comes with many applications ranging from movie editing to flash animation. Most people only utilize a small subset of those applications. Anyone looking at my desktop would see these three icons and they would have a pretty good idea of what I do (graphic design) without having it spelled out for them. What if I had these icons on my business card?

But it is not enough to just explain what I do. The same way I can see that Adobe CS5 is much more than just Photoshop, Illustrator and InDesign, people need to see that MentorMate is more than just the skills of a single graphic designer. After a little more brainstorming the concept for the back of the card was born.

A list of all relevant skills was compiled with input from the entire staff and an icon was created for each of these skills. Every employee’s card has his or her skills highlighted, while the other skills remain grayed out. At a glance, you can see exactly what skills any person at MentorMate has and at the same time see all the skills MentorMate encompasses as a whole.

A bonus side effect of this design materialized: people want more badges. MentorMate employees are driven to light up as many of their icons as they can and become eager to learn new skills. The business card became almost like a trophy, a point of pride.

“Storyboarding” the Card Front

First_Name.Last_Name@MentorMate.com is the email convention we use. As you can see, this email address holds a lot of information: name, company, website and email are all present. Instead of writing all that information out on the card, why not just break it down into the core elements?

Minimizing lines of code is an important practice for developers. Creating visual appeal is important to graphic designers. Most of all, it just makes sense. Alex.Krasny at MentorMate.com is everything a client or business partner needs to know about me. Why use four lines when it can be said in one?

The graph paper background and the hand drawn brackets were added to create a storyboarding feel. MentorMate begins each project by discussing the clients business needs first, usually using a white board. There are many arrows, lines, subtitles and images scribbled on a white board in the early stages of any application’s development. Although the business card is far from an early stage of development at this point, the handwriting and measurements add an accurate visual cue.

Scanning the QR code will import all of the card’s contact info into any mobile device. QR codes are a relatively new piece of technology that will probably continue to develop as more people own smartphones that have scanning capabilities. The business card wears the QR code almost as a badge of technology forwardness.

“Make our business cards explain what we do as a company.”

In the end the business cards explain what we do as a company without outright saying so. The amount of redundancy is kept at a minimum while still delivering all relevant information. The proficiencies of each employee are delivered along with the company’s total knowledge pool without using excessive technical jargon. The resulting design is visually appealing and provides others with a small glimpse of our storyboarding process.

From a User’s Perspective

According to Statcounter, Chrome was the third most used web browser (13%) worldwide as of November 2010, behind Firefox (31%) and ahead of Safari (4.7%). According to Google,

“The store will be featured prominently in Chrome, helping people discover great apps and developers reach millions of users around the world,” says Google’s blog, noting that in 2010 alone, “the number of people using Chrome has tripled from 40 to 120 million.”

In no time, the TweetDeck has apparently jumped to the head of the pack:

“In the 3 days since the launch of the Chrome Web Store, our Chrome TweetDeck has had 45,851 users and been installed 62,477 times. To give these numbers some context it’s useful to compare them with the “big boys” of the Web Store such as the New York Times (43,542 users – 56,215 weekly installs) and Gmail (40,783 users – 37,921 weekly installs).”

The current layout is as simple and straightforward as a central repository should be. In the long run, the launch is a positive nod for the developer community, which now has yet another distribution channel for their creations in the form of mobile apps, browser applications, add-ons or themes.

In related (and potentially converging) news, Google has also made the case that “Chrome is enterprise ready,” opened the mobile “App Inventor for Android” to all Google account holders and announced Intel-based Chrome OS notebooks from Acer and Samsung to be available in mid-2011, with Verizon Wireless providing integrated 3G cellular connectivity..

Jointly developed by W3C and WHATWG since 2004, HTML5 was created in response to the observation that the HTML and XHTML in common use on the World Wide Web has become a mixture of features introduced by various specifications, along with those introduced by software products such as (various) web browsers.   The ultimate objective being the establishment of more uniform practices as well as to define a single markup language that can be written in either HTML or XHTML.

In this sense,  HTML5 adds many new syntax features to improve inclusion and handling of multimedia and graphic content on the web, new elements are designed to improve the semantic richness of documents and new attributes have been introduced to improve and simplify the semantic expression.  The standards also define the required processing for invalid documents, so that syntax errors will be treated uniformly by all conforming browsers and other user agents. Ancillary benefits promise to increase security, expand storage and offline functionality.

In the end, it’s about a smoother, richer, more useful web.

A mobile Era

While proprietary programs like Flash and Silverlight have dominated the past decade of modern desktop oriented website programming, the complexity and resources associated with such programs makes them unattractive on the mobile web. As a result, developers began responding to user demands through a logical workaround: the mobile application.  In this instance, all content, functionality and experience is contained within an app on top of a smartphones or tablet operating system.

The popularity and ubiquity of mobile apps has steadily increased over the years, Apple’s iPhone launch in 2007 radically altered the expectations that the public had for the mobile web by choosing to use WebKit, the same system that underpinned its desktop Safari browser. In 2008, Google followed suite by using the same open source browser engine to power Chrome, and handset makers like Nokia, Palm, Samsung and RIM have since incorporated WebKit browsers into their devices. As WebKit secures its place of dominance in mobile web browsing, the appeal of HTML5 becomes all the more attractive, considering current support for the standard ranges between 77% – 96% amongst top browsers:

The Convergence

Since many of the nuances have yet to be agreed upon by the collaborating development groups, it’s clear that HTML5 will need time to mature and find its stride.  But as the trend for HTML5 browser support shows that compatibility will strive for perfection in the near term (Microsoft’s IE notwithstanding), web developers can begin programming with the confidence that HTML5 will come through for the mobile masses.

Morgan Stanley analyst Mary Meeker stole the show last week with her “State of the Web” presentation at the Web 2.0 Summit in San Francisco. Crowned “The Queen of the Net” in 1998 by Barron’s Magazine, Meeker started covering the nascent tech sector in the mid-eighties as an analyst with Solomon Brothers. Throughout the years, she has published a long list of research reports and leading insights into the future of technology — most notably, a 322 page tome titled “The Internet Report” Co-authored with Chris DePuy in 1995.

Successful stocks Meeker championed early on included Dell, Microsoft, Intuit, Netscape, AOL, Amazon.com, Yahoo!, eBay and Google. Failed picks included AOL after its takeover of Time Warner, Excite@Home and drugstore.com.  In 2004, Morgan Stanley (with Meeker as research analyst) served as lead manager for the initial public offering of Google. Recently named one of the 10 smartest people in tech by Fortune Magazine, Meeker is currently a managing director at Morgan Stanley and serves as head of the investment bank’s global technology research team.

The land grab for Internet access

Slide #10 suggests that Smartphones will pass PCs in 2012.

The topline data point shows that smartphone sales will outpace those of PC’s — both notebook and desktop computers combined — in two years, with more than 450 million smartphones projected to ship in 2012.

Apple iOS devices “ramping faster than any new thing”

The report shows that usage of Apple iOS devices — the iPhone, iPad and iPod touch with 120 million users — has ramped up faster than any previous technology including NTT Docomos’s imode Web phones, the Netscape browser and AOL’s early dial-up Internet service.

The report also points to Apple and Google’s Android platform driving “excitement and momentum” in mobile, with their respective smartphone platforms together accounting for 37% share of the market.

It’s a Smartphone future

It’s increasingly clear that smartphones are here to stay as mainstream devices and the research underscores the necessity for organizations to understand essentials of the brave new mobile world. Fundamental themes of  mobile application development, mobile advertising, mobile commerce and mobile website optimization should all be part of the mobile innovation strategy as the gap between PC’s and mobile closes over the next 12-24 months.

While mobile apps definitely have the potential to build your business by engaging customers in unique ways, many overlook a logical starting point: making your website mobile friendly. Some businesses have chosen to circumvent website compatibility and usability issues by offering apps that try to provide the same features as their website. While apps do have their time and place, they are not the silver bullet.

The benefits of mobile website optimization vs. applications include:

• Better Compatibility: apps are extremely platform specific, meaning that without having an app on each platform, you are alienating a portion of your potential traffic.  As opposed to developing mobile applications for 2, 3 (or more) platforms, one standard website optimized for all smartphones can be accessed anytime on any device.

• Lower Cost: many times the mobile website can deliver the same functionality as would a stand-alone application at less than half the price of a full-fledged app. You may get more bang for your buck from the properly optimized mobile site than you would from an application.

• Customer Usability: the end-users experience is ultimately what matters. While applications can serve advanced purposes, it can still be difficult to navigate simple sites if it’s not properly optimized for finger-based browsing.

• Maximum Reach: mobile websites can reach a broader audience than can an individual app, based on the fact that they are aligned with your businesses website.

• Ease of Implementation: mobile websites do not require the download, installation and use of a particular operating system in order to be used. As recent research has shown, 62 percent of apps are deleted within two weeks of being downloaded, which can hurt if your investment depends on the apps long term use.

In order to make the case for mobile sites, it is important to look at the market and an increasing percentage US adults use their smart phones to browse the web; as the next generations of smart phones are launched, mobile browsing will only continue to grow. Many carriers are also requiring mandatory data plans with the sale of web-enabled phones, anticipating the growth of mobile web use.

Additionally, many non-phone mobile devices use a “limited function” browser to browse the web. This includes tablet devices such as the iPad and Amazon’s Kindle Reader. These devices also usually benefit from a mobile site, though not as significantly as smart phones.

This presents challenges to many companies who have invested in a very good and very effective website, but suffer from it being incompatible with mobile browsers, or just plain difficult to use on mobile devices.

Specifically, sites programmed in Flash are currently not compatible with almost any phone browser. Flash sites are excellent tools for traditional desktop browsers, and provide great tools for customer engagement, but are completely dysfunctional on mobile phones. Even if this changes with some of the new OS launches and upgrades this year, Flash sites will still require some mobile optimization to exhibit the same level of effectiveness.

None of this is meant to completely discount the value of apps for the right situation, just to emphasize that taking a step back to start with the overall mobile browsing experience makes sense. Apps and widgets definitely have their place and may ultimately work better for your particular business – but don’t ignore the basics when it comes to mobile website optimization.

It is very important to define which operating systems and on which browsers the application should be tested. Once you define the browsers on which the system should work, make sure you check all functionality on all browsers. If there is not enough time/budget, you can check the design and the main functionalities of the site with all browsers. Most of the cosmetic problems generally appear in Internet Explorer 6.0. We like to use IETester (http://www.my-debugbar.com/wiki/IETester/HomePage), the application supports all Internet Explorer versions.

For comparing the design of a site on different browsers, there is one tool named Adobe BrowserLab that works great. With it you can compare a web page in one browser next to a page in another browser or overlay the pages entirely. The tool supports the following browsers:

• Chrome 3.0 – Windows
• Firefox 2.0 – OS X
• Firefox 2.0 – windows
• Firefox 3.0 – OS X
• Firefox 3.0 – Windows
• Firefox 3.6 – OS X
• Firefox 3.6 – Windows
• Internet Explorer 6.0
• Internet Explorer 7.0
• Internet Explorer 8.0
• Safari 3.0 – OS. X
• Safari 4.0 – OS X

Make sure that your bug reports are easy to understand

The best testers have the most bug reports resolved. A good bug report is one that assists in resolving an issue. Ensure that your bug reports can easily be reproduced by making them as clear and concise as possible. Here are several steps that you can follow:

1. Reproducibility – inform the developers how often the bug appears

2. Severity – inform the developers of the scale of the bug.

3. Summary – summarize the bug with one sentence – as a title for your report. Be descriptive and concise.

4. Bug Description – this is the most important section.

Be sure to include:

• Location of bug in the software
• URL (if you are testing web pages)
• Testing browsers or environment
• Information about the bug – here you need to explain the input data you used and the sequence of steps you made to cause the bug. This point is quite important make sure that your instructions are clear and reproducible. Make sure that you use the same terminology as the developers.
• Screen shots with comments and explanations. Firefox has one wonderful Add-on “FireShot”, this Add-on can be found also for Internet Explorer.

These days, more and more people in the IT business work with clients or have coworkers that are not from their own country and who communicate in another language. No matter how well you learn to understand a language, there still can be misunderstandings that can lead to problems of all types. It helps to have a pre-planned method and agreed terminology to report bugs.

There must be bugs

Start to test with the idea that there should be bugs. There is not a system that does not have a few errors. This mindset will help you to be more focused on finding problems.

Test situations that should not be executed

Sometimes, due to a variety of reasons, users do not enter something as they are intended to, press buttons out of order, or otherwise misuse the software. It is important to try to account for these situations.
If you have a registration form to test, try doing things OTHER than fill out the form. It was built to accept data, so try not entering anything and pressing the button for registration, enter invalid data such as email that does not have the “@” symbol or very long zip code or name. Use boundary cases (inputs at or just beyond maximum and minimum limits) to attempt to receive errors. There are symbols that can break the database or break the request from the database if they are entered and saved in the system. Such examples are the percentage (%) symbol, inverted commas(“”), and two minuses (–) together.
If you have a combination of actions that need to be done one after another, change their sequence. Make sure that you have checked all situations that you can think of, according to the system you test.

Test real situations

The above tips should not turn the QA process into a highly critical and aggressive testing period. Do not test and report bugs for unrealistic situations. Make sure you have understood the specification for the application and do not tease the developers with unrealistic bugs.

Test like you are a regular user, a computer illiterate user.

Think about the users, question yourself. Is this system user friendly? Can you easily navigate the program? Is the text within the system clear and understandable? Are the error messages helpful? There are a lot of examples in your own personal life. Think about when you sit at home on your personal computer – which sites or programs do you prefer? Why? Which you do not like? Why? Usability is always the answer.

Keep written reports

Sometimes bugs are  shared verbally with the developers. This can work against you.  Make sure that you keep written documentation of all your discussions about issues or anything concerning a project.  The best practice is to have reports on every issue you find.  Sometimes when communicating bugs verbally, many testers complain that the developers take the credit for their work or that managers who calculate the productivity of a tester by the number of bugs he/she reports do not give full credit.

Work to become a Team

Communication with your team members is just as important as knowing good techniques for testing and is key for the successful achievement of a quality product. You need to be flexible. During your work you will meet junior developers that have never worked with testers or people who will disagree with your findings. Some developers just need to get used the fact that they have bugs in their programs. This is normal. You need to persuade them that a tester for a developer is not like a critic for an author. Help them understand that you are a team and you both want the same thing. Prove your statement with facts and knowledge of the system and specifications.

Gain new knowledge

Black box testing uses external descriptions of the software with no knowledge about the internal structure. If you want to become competitive and help further your career, you should take a peak at the source code and ask questions of the developers. For cosmetic issues, you can read and learn about HTML and CSS and report specific CSS styles/areas of a web page that need fixing. Some tools that can help are the Web Developer Toolbar and the Firefox Add-on, Firebug. Some knowledge about Databases also will be helpful, this way you can more clearly understand the processes in the system and the reasons why some bugs appear. With more knowledge of how the software works, you will speed up the developer’s work and make yourself more efficient in the process.

Approving a high quality product is a hard and complicated process. Learn from your mistakes and from the bugs you found. Keep good communication with your coworkers, defend your position in a positive manner, keep learning, and continue testing.