Rapper's hard work ethic

I just saw a video about a young rapper, Bow Wow, talking about his work ethic. I haven’t been much of a bow wow fan but I do share the same philosophy about sleep . “The sun never beats me up, I always beat the sun up. I never let the sun beat me up” . I know that sounds intense but it just goes to show that there is NO SHORTCUT to success. Whether you aspire to be a rapper, athlete, entrepreneur, success does not come easy.

The Mobile UX

 

Designing a user experience for mobile is completely different from a website. This may seem obvious to you because of the screen size and the input, however it is MUCH more than just the screen size and the lack of an input device such as keyboard and mouse. So what more is there?

For one, the environment can be entirely dynamic because a cell phone can be taken anywhere, you can be running, on a train, on a boat, etc.   A great mobile experience should be able to be indiscriminate to its context, wherever you are.

The biggest change, obviously, will be the screen size real estate and because of this you must ONLY have the essentials that are needed. In other words, you must satisfy the need of why the user opened up your app or mobile site in the first place. For instance, If I visit the Gmail mobile site I don’t care about the Google readers, or the Google docs, etc. The #1 need for me is to check my email, so if you need to sacrifice the Google reader to make my user experience easier to check email then DO IT!

I was watching one of the old WWDC(World Wide Developer’s conference) , I think 1997, Steve Jobs was talking about produce development and he said that one of the most important lessons he had learned was that it’s best to concentrate on the consumer’s needs first and work backwards to see how the technology can support that instead of the other way around, which is to get a group of developers and see what we can flexibly build for the consumer. So step #1 in designing a great mobile experience is to understand what the exactly the user needs and try to find the best user interface to accomplish those needs.

Here are a few key points that a great mobile experience should have.

Low learning curve. A great user interface has almost ZERO learning curve and should be easy to use from the get go.

Minimal. The functionality presented should be very minimalistic or limited to what the user needs to do. Ford once said “You can buy a Model T in any color you want, as long as it’s black”. A great mobile experience should be “You can use this app as long as you press the only button that’s available to you” .

Steps. The point of entry from point A to point B, where the user wants to go should be as minimal as possible.

Leaving a trail. Back in the good ol’ days people used to leave a noticeable trail so that they can find their way back. The mobile user experience should be the same.  It should be easy to see where you came from and where you are going.

Simple tear drop effect with CSS3

With CSS3 and the support of webkit it’s become super easy to apply rounded corners . Below I will show you guys how to do a simple teardrop effect using CSS3.

So we will transform a simple square to a teardrop:

            

 

#tear{
	margin: 0 auto;
	top: 60px;
	position: relative;
	width: 300px;
	height: 300px;
	background-color: #6CF;

	-webkit-border-top-right-radius: 70px; 
	-webkit-border-bottom-left-radius: 70px; 
	-moz-border-radius-topright: 70px; 
	-moz-border-radius-bottomleft:70px; 

	}

*Note that you can also do a full rounded corner by simply doing –webkit-border-radius: #px;

My notes from Buzzmarketing

Whenever I think of a new marketing strategy I always refer back to my notes from a book I read some time ago. The book was Buzzmarketing by Mark Huges. Below are my notes that I wanted to post online and share with you guys. Feel free to leave any comments or ask any questions.

The 6 buttons to trigger buzz:
1. The taboo – sex, lies, and bathroom humor.
2. The unusual.
3. The outrageous.
4. The hilarious
5. The remarkable.
6. The secret – both the revealed and unrevealed.

Steps to getting buzz:
1. Push the right button.
2. Capture the media.
3. Advertise for attention.
4. Climb the mountain.
5. Discover creativity.
6. Police your product.

The five most frequently written news stories:

-David vs. Goliath story
-The unusual or outrageous story
-The controversial story
-The celebrity story

-What’s already hot in the media

3 must haves: 
1. Talkers- find people who will talk about you
2. Give people a reason to talk
3. Tools – Help spread the message faster (tell a friend, easy forward button, etc)

Before you run an ad, before you launch a product, before you put anything new, ask the magic question:Would anyone tell a friend about this? 

 

Basics of web font-size types (px, em,pts)

Pixels(px)

The default font size in the web is 16px.

What 16px refers to is the height of the font from highest top to the lowest bottom of the letters. For instance an “e” may only be 10px but when the letter is included with a word such as “Legit” it gets measured from the lowest bottom of the “g” and highest tipping point of the “L” which accounts to 16px.

Em

A lot of people get confused about em, but there’s nothing really that difficult about them if we can think of them like ratios.

1em = default font

So

1.5em = 1.5 x default font

font-size:16px;

font-size:2em;

The above code will approximately double the font size to 32px.

 

Pt

A point is rarely ever used as this unit of measurement is used for physical print. This is based on ink on paper typography. To put it in metaphors,  pixels are to web as points are to paper. Points should never be used on the web as they vary wildly from browser to  browser so you don’t have to understand the ratios converting to pts.

CSS3 fonts

Integrating custom fonts into your CSS3 is very easy. This is established by using the font-face property. Since the code is easy lets dive right into the CSS.
Example:

/**********
CSS3
***********/

@font-face{
font-family: special font name;
src: url(‘directory of your download fonts’);
}
p{
font-family:special text, sans-serif, helvetica;

}
To download free text that is @font-face compatible you can go to this site:

http://www.fontsquirrel.com/fontface

Preview web background while working on Photoshop

As web designers, we are constantly working on photoshop, so when we are working on a background image and you want to preview it on a browser what do you do? Do you open up a text editor and type in the  background: url(” “) code? That’s too tedious and there’s a better way in Photoshop CS5.

With your image opened in Photoshop go to: File –>Save for web and devices . Once the window opens click on the “2-up” tab

Continue on by clicking on the dropdown menu (shown below)

 

 

Click “OK'” after you chose “background image” as the settings.

At the bottom of the page, click on “preview’ to see your background image on a web browser.

 

 

 

Working with CSS3 backgrounds

Working with CSS3 backgrounds

Layers

With CSS3 you can stack different backgrounds in different layers. You can accomplish this simply by separating the different background links with commas “,”.  Background layers will work with Chrome, Safari and Firefox, in addition to IE9.

For example:
background: url(‘../../Pictures/Milhouse.gif’)  no-repeat ,   <–First background 
url(‘../../Pictures/Milhouse1.jpg’) top right no-repeat; <– Second background layer 

Size
The CSS3 property lets you adjust the background size straight from the code without having to readjust in an image edidor like photoshop.

The code is simple:

Background-size: width, height

For example if a background size of 2400 x 1800 px is too big we can cut this in half by writing:
background-size: 1200px, 900px;

Background origin/clip

Background-origin is where the background image actually starts and background-clip is where the background gets cut off.

There are 3 attributes for the background origin/clip property, they are: border-box, content-box, padding-box

Background-origin: border-box, content-box, padding-box
or
Background-clip: border-box, content-box, padding-box

Depending on which of the three you choose, that is where your background image will begin.

For example:

Background-origin:border-box;
Background-clip:content-box;

The above code means that the background will start immediately from the border and be clipped  or cut off wear the content box starts.

HTML5 structure overview

I don’t have time to do a tutorial now but I like to share my HTML5 notes. The notes below were written so that I could understand them.They are written in outline like format and hopefully it’s easy for anyone else to understand as well. Let me know if you have any questions.

 

HTML5 Browser Support
For specific HTML5 elements support by browser:
http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers
http://findmebyip.com/litmus/ (good matrix comparison)
http://html5accessibility.com/
http://html5test.com/ (You can test your browser)

 

Sectioning elements:
H1-H6 tags
Article
Aside
Section
Nav

Planning and organizing content
Do a written document outline of your website content first to think about the semantic elements on your page. You don’t have to get down to the gritty details, it’s just to see a macro perspective between the relationship of your content.

From this outline, it’s probably best to dive into the mockup and start wireframing rather than going into the code but if you are definitely dead set on a specific design/structural content you can probably go straight into the code.

Which sections should I use? (When to use what?)
A. Header tags
B. Article
C. Aside
D. Section
E. Nav

HTML5 from the 1st person POV

SECTION
I like to accept content that have hierarchy and come in as a group.

DIV:
Use me when you want me to group things with specific styles.

NAV:
I’m a self starter and like to introduce new sections.
Do you want me to highlight this important section?
Are you starting a major navigation?

Articles:
I only accept independent content that can make sense by itself.

Aside:
I like spontaneous content that may digress a little from the overall content.

Footer:
I like to provide information about the author, related links and other extraneous information like privacy protection and terms & conditions. Also please don’t discriminate me just for being at the bottom of the page I can be used anywhere as long as I fit the above guidelines of information.

 

With all the new section elements introduced in HTML5 the use cases of id’s and classes are going to significantly drop since it will significantly reduce the usage of unique div’s.

So when do you want to use Id’s and classes?

When to use id’s & classes:

-Identifying scripting, page navigations,
-controlling elements and styling (Javascript areas & specific css use Id attributes)

It’s also a good idea to add id’s when you want to distinguish similar elements within the code
For example:

<section id=”services”>
</section>

<section id=”testimonials”>
testimonial stuff

</section>

 

Other Elements

Small
<small> can be used for side comments and fine print for legal information (e.g disclaimer or copyright)

<small> © Copyright  </small>

Mark

<mark> Text within the mark element should be </mark>

The mark element highlights a specific text, it’s not only for visual purposes but to indicate some kind of reference(e.g showing something important or giving extra clarification within some context)

Time
This tag element should be used for illustrating time in a 24 hr day. It uses the Gregorian calendar.

Anchor
Now block level links are possible by wrapping the <a> tag around an entire section or div.

For example:

<a href=”http://www.sample.com

<section id=”product”>

Lorem Ver A is a really revolutionary product

</section>

<footer> Inventor: Creative Maester </footer>

</a>

This anchor wrapping trick can be applied for a.hover images and links.

The link relationships(rel) attribute

The rel attribute defines what type of link you are placing into the element.

<link rel=author, bookmark, icon, license, nofollow, etc>

You can see all the rel attributes from this site:
http://microformats.org/wiki/existing-rel-values