Mar 11

iPhone ‘Add to Home Screen’ Custom Icon

Posted on Thursday, March 11, 2010 in General Tips, Tutorials, Web Design

When you bookmark your website on an iPhone or iTouch by default it takes a screen shot of the current page. If you want to add a custom icon follow these simple steps!

1)  Create an image 129x129px 72dpi. This is the correct size! Other website debate the actual size, but for top quality and crispness use 129px by 129px. Make sure to save it as a PNG. (in photoshop go to ‘Save For Web & Devices’)

2A) In the head “<head></head>” of your website add this code:

<link rel=”apple-touch-icon” href=”customIconURL.png” />

2B) You can also just drop an image named “apple-touch-icon.png” in your root directory and it will work the same.

That’s it. Now on your iDevice add your site to the home page and boom!

iPhone Custom Icon

Rate this post:
(2 votes, average: 5.00 out of 5)
Loading ... Loading ...
Feb 13

CSS Box Model

Posted on Saturday, February 13, 2010 in Web Design

If you are learning CSS the Box Model is one of the first things you should learn and w3schools provides a perfect example. All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

The box model allows us to place a border around elements and space elements in relation to other elements.

The image below illustrates the box model:

box-model

Explanation of the different parts:

  • Margin – Clears an area around the border. The margin does not have a background color, and it is completely transparent
  • Border – A border that lies around the padding and content. The border is affected by the background color of the box
  • Padding – Clears an area around the content. The padding is affected by the background color of the box
  • Content – The content of the box, where text and images appear

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Rate this post:
>>Be the first to rate!
Loading ... Loading ...
Jan 13

CSS Reference Guide

Posted on Wednesday, January 13, 2010 in Web Design

CSS Reference Guide

Property Description CSS
background Sets all the background properties in one declaration 1
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page 1
background-color Sets the background color of an element 1
background-image Sets the background image for an element 1
background-position Sets the starting position of a background image 1
background-repeat Sets how a background image will be repeated 1
border Sets all the border properties in one declaration 1
border-bottom Sets all the bottom border properties in one declaration 1
border-bottom-color Sets the color of the bottom border 2
border-bottom-style Sets the style of the bottom border 2
border-bottom-width Sets the width of the bottom border 1
border-color Sets the color of the four borders 1
border-collapse Specifies whether or not table borders should be collapsed 2
border-left Sets all the left border properties in one declaration 1
border-left-color Sets the color of the left border 2
border-left-style Sets the style of the left border 2
border-left-width Sets the width of the left border 1
border-right Sets all the right border properties in one declaration 1
border-right-color Sets the color of the right border 2
border-right-style Sets the style of the right border 2
border-right-width Sets the width of the right border 1
border-spacing Specifies the distance between the borders of adjacent cells 2
border-style Sets the style of the four borders 1
border-top Sets all the top border properties in one declaration 1
border-top-color Sets the color of the top border 2
border-top-style Sets the style of the top border 2
border-top-width Sets the width of the top border 1
border-width Sets the width of the four borders 1
bottom Sets the bottom margin edge for a positioned box 2
caption-side Specifies the placement of a table caption 2
clear Specifies which sides of an element where other floating elements are not allowed 1
clip Clips an absolutely positioned element 2
color Sets the color of text 1
content Used with the :before and :after pseudo-elements, to insert generated content 2
counter-increment Increments one or more counters 2
counter-reset Creates or resets one or more counters 2
cursor Specifies the type of cursor to be displayed 2
direction Specifies the text direction/writing direction 2
display Specifies the type of box an element should generate 1
empty-cells Specifies whether or not to display borders and background on empty cells in a table 2
float Specifies whether or not a box should float 1
font Sets all the font properties in one declaration 1
font-family Specifies the font family for text 1
font-size Specifies the font size of text 1
font-style Specifies the font style for text 1
font-variant Specifies whether or not a text should be displayed in a small-caps font 1
font-weight Specifies the weight of a font 1
height Sets the height of an element 1
left Sets the left margin edge for a positioned box 2
letter-spacing Increase or decrease the space between characters in a text 1
line-height Sets the line height 1
list-style Sets all the properties for a list in one declaration 1
list-style-image Specifies an image as the list-item marker 1
list-style-position Specifies if the list-item markers should appear inside or outside the content flow 1
list-style-type Specifies the type of list-item marker 1
margin Sets all the margin properties in one declaration 1
margin-bottom Sets the bottom margin of an element 1
margin-left Sets the left margin of an element 1
margin-right Sets the right margin of an element 1
margin-top Sets the top margin of an element 1
max-height Sets the maximum height of an element 2
max-width Sets the maximum width of an element 2
min-height Sets the minimum height of an element 2
min-width Sets the minimum width of an element 2
orphans Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element 2
outline Sets all the outline properties in one declaration 2
outline-color Sets the color of an outline 2
outline-style Sets the style of an outline 2
outline-width Sets the width of an outline 2
overflow Specifies what happens if content overflows an element’s box 2
padding Sets all the padding properties in one declaration 1
padding-bottom Sets the bottom padding of an element 1
padding-left Sets the left padding of an element 1
padding-right Sets the right padding of an element 1
padding-top Sets the top padding of an element 1
page-break-after Sets the page-breaking behavior after an element 2
page-break-before Sets the page-breaking behavior before an element 2
page-break-inside Sets the page-breaking behavior inside an element 2
position Specifies the type of positioning for an element 2
quotes Sets the type of quotation marks for embedded quotations 2
right Sets the right margin edge for a positioned box 2
table-layout Sets the layout algorithm to be used for a table 2
text-align Specifies the horizontal alignment of text 1
text-decoration Specifies the decoration added to text 1
text-indent Specifies the indentation of the first line in a text-block 1
text-shadow Specifies the shadow effect added to text 2
text-transform Controls the capitalization of text 1
top Sets the top margin edge for a positioned box 2
unicode-bidi 2
vertical-align Sets the vertical alignment of an element 1
visibility Specifies whether or not an element is visible 2
white-space Specifies how white-space inside an element is handled 1
widows Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element 2
width Sets the width of an element 1
word-spacing Increases or decreases the space between words in a text 1
z-index Sets the stack order of an element 2

CSS Pseudo-classes/elements

Pseudo name Description CSS
:active Adds a style to an element that is activated 1
:after Adds content after an element 2
:before Adds content before an element 2
:first-child Adds a style to an element that is the first child of another element 2
:first-letter Adds a style to the first character of a text 1
:first-line Adds a style to the first line of a text 1
:focus Adds a style to an element that has keyboard input focus 2
:hover Adds a style to an element when you mouse over it 1
:lang Adds a style to an element with a specific lang attribute 2
:link Adds a style to an unvisited link 1
:visited Adds a style to a visited link 1
Rate this post:
>>Be the first to rate!
Loading ... Loading ...
Sep 10

Tips To Design Better Banner Ads

Posted on Thursday, September 10, 2009 in General Tips, Marketing, Web Design

  1. Use the words “Click Here” or “Enter” every time you design a banner.
    1. You may think that these two words are overused online, but tests have proven that these words are able to increase the effectiveness of a banner ad by 20-30% without changing anything else in the banner. They inspire the reader to click on the ad if the headline of the banner interests them.
  2. Animate Your Banners.
    1. An animated banner will increase your banner ads effectiveness by 30-40%. The key in using animation in your banner is keeping it small. The reason that you don’t want big pictures or images that look like live video in your banners is the fact that the banner will load too slowly on people’s pages. The visitors just won’t see it.
  3. Use an awesome headline in your banner.
    1. Don’t think that just having a good looking banner will make people click through. The key to effective banner advertising is having a good headline. A good technique to use is to keep the same headline on your banner ad that you have on your entry page. Then when they click through the banner, they will come to see the same headline that sparked an interest in them in the first place.
  4. The best word to use in your banner headline is “FREE.”
    1. This doesn’t mean that you just need to put the word “FREE” on your banner without any other text. Tell them exactly what they will be getting for FREE. Using the word “FREE” in virtually any headline will make your response rate increase dramatically.
  5. Change your banner ads frequently.
    1. Studies have proven that most banner ads start losing effectiveness after the third time a person has seen it. If they haven’t clicked on it by then, they probably never will. If you are spending a lot of money on advertising and purchasing hundreds of thousands of banner impressions, you will need to come up with a lot of different banners.
  6. Be clear in your graphics and messaging.
    1. Your main objective is to have people take a particular action after viewing your ad. A strong, clear message will help capture their interest. Clear communication requires that you understand your message, what you are selling and the benefit that you are offering potential customers. You will often want your primary message to be the strongest visual element in your ad.
  7. Less really is more.
    1. As you create your design, remember that less cluttered messages will make a stronger impact with the online viewer. Limit the number of elements — the colours, fonts, graphics and words — that you use in your ad and ask yourself whether your primary message is clear.
  8. Use contrast to capture attention.
    1. Your ad will likely include these elements: background colours, a bold text message, and a photograph or drawing, and animated. To be effective you need to have contrast between these elements. Contrast can be achieved using different font sizes and bolds and colours.
Rate this post:
(2 votes, average: 5.00 out of 5)
Loading ... Loading ...
Jul 18

Designing Effective HTML Emails

Posted on Saturday, July 18, 2009 in General Tips, Marketing, Web Design

  • Don’t give up on graphics, but understand that many of your recipients just won’t see them.
    • Make sure not to contain any important “Call to Actions” in an image.
  • Alt tag copy is an art.
    • When Images are not displayed, often time alt text is shown in its place.
    • Use alt text to describe the benefit they are missing by not being able to view the image. EX: “50% off our entire stock, July 4th only!”
    • Also, be aware not all email clients, such as Hotmail, do not display alt text.
  • Make sure your graphics don’t depress response.
    • Use graphics to reinforce messaging, not for messaging itself.
  • Make sure the reading pane* contains a call-to-action, not just graphics.
    • Always state benefits for the reader in the vary top of your email because this text is often used in the “*reading pane” displayed before they open your email.
    • If using columns design the smaller less important column on the right. (People read LEFT to right).
  • Use your subject lines, sender name and “From” address to their best advantage.
    • The sender name should include the name of your company or brand
    • Use an email address that makes it clear who you are and what you do. EX: newsletters@mycompany.com
    • Use the subject to state a benefit to the reader not you.
    • FYI: You have less than 10 words to catch the readers attention
  • Use inline CSS, expect the <head></head> to be ignored
  • Use a proper width for your email.
    • Due to Multiple side bars (inbox, ads…), and standard screen resolutions, expect the width of you email to be between 750-800px.

Overall state the benefit the person reading is getting weather it’s a super deal IE: free shipping / 15% off or a knowledgeable tip you are giving. Make sure this is the forefront because after you have them interested they are more likely to find out what your true call to action is, whether it be making money, generating traffic or providing helpful information.

Have fun with it and everything else you do!

Rate this post:
(2 votes, average: 5.00 out of 5)
Loading ... Loading ...
Mar 23

Outsourcing, A Magical Unicorn…

Posted on Monday, March 23, 2009 in General Tips, Web Design

In today’s world when it comes to technology outsourcing is an inevitable option. At first I was a bit skeptical, I heard good things about outsourcing, but I also heard a lot more horrendous stories about how outsourced projects would only be 50% completed and the company or coders on the job was non responsive and not as competent as they led you to believe. I have a relative who recommended RentACoder.com (A place to post a job and company’s/coders will bid on your project) at first this was the last direction I wanted to take, but after having my back in a corner I posted my job just to see how the process works (no strings attached). After finding out that you can view the bidders work history and read reviews past clients have posted I began to drop my walls and thought, maybe this will work out. I immediately set some guidelines:

  1. The coder had to have a rating of at least 9 out of 10.
  2. The coder had to have at least worked for 30 clients.

After a few days passed I narrowed my bidders down to about 5 coders I was interested in (watch out for the, I’ll do it for dirt cheap no question asked guys). I went with the user ‘MOJO Coder’ also known as Josh over at ibot.tv. I went with Josh because he met my guidelines and had the most experience in my particular project. After locking all the funds in escrow (including Josh’s 20% down to insure his performance) work began and Josh was a dream come true. He was that magical unicorn galloping off in the distance coming my way to save me from the code monster…

Through the entire process Josh was EXTREMELY attentive and always there to answer questions, give great suggestions, and complete the work above and beyond reasonable expectations. If you are looking for PHP coding and more specifically WordPress back end customization look no further, Josh is you man (or white magical unicorn…) check out ibot.tv for more info.

So next time you need work done don’t hesitate to outsource, just make sure you do your research on who you are hiring.

Rate this post:
(2 votes, average: 4.50 out of 5)
Loading ... Loading ...
Jan 30

Google Simple, Apple Elegant

Posted on Friday, January 30, 2009 in General Tips, Marketing, Web Design

When designing a website or print work I can’t stress enough to K.I.S.S. (Keep it simple stupid). When somebody comes to your home page it should be clear what you want the visitor to be informed with. A good way of doing this is to give a brief description of each item (max 4-5) making your newest/best item the most prominent, and giving the visitor a CLEAR CALL TO ACTION on how they can reach this information. I’m sure you have heard people say “Where do I click?” or “Where do I go?” take out the guess work, people like things easy. An entrepreneur friend of mine lives by the motto “Google Simple, Apple Elegant” and Apple is a perfect example of the clear call to action. Visit their home page and you will notice there is no confusion on what Apple wants to share with you or how to get to that information.

google-simple-apple-elegant

Revisit your website with a fresh set of eyes and see if your website is overwhelming with content, offering 100 different paths to take or if it’s clear where to go with the important stuff.

When designing for the consumer just remember you can get your design lookin’ darn sexy while keeping the users experience easy by keeping it Google Simple, Apple Elegant.

Rate this post:
(2 votes, average: 5.00 out of 5)
Loading ... Loading ...
Jan 26

10 SEO Tips [that work]

Posted on Monday, January 26, 2009 in General Tips, Marketing, Web Design

Here is a list of SEO methods I find help crack the magical SEO challenge of getting your website higher up in the rankings.

search_engines

Title Tags:

  • Your title should contain important keywords.
  • Use a different title on every page.

Links need titles too:

  • Add a title tag to every <a> tag and give a short description (5 words) what the link is about.
  • Tip: Be honest and don’t just cram random keywords into this section.
  • EX: <a href=“about.html” title=“Come find out more about us”>About Us</a>

Image Alt:

  • Add the Alt attribute to all of your images.
  • EX: <img src=”gnomes.jpg” alt=”A bunch of happy gnomes” />

Be standard:

  • Validate all of your work.
  • Search engines / Spiders like websites that are created properly.
  • Validate your site via w3c – Validate Now

Use common tags:

  • Be sure to use the <H1>, <H2>, <P> and other common tags.

Link around:

  • Make sure you have links coming in to as many pages as possible.

SiteMap:

Submit your site:

  • Submit your site to Google and Yahoo
  • You only need to do it once this is just to be safe.

Local business center:

  • If you type in “restaurants 92106″ into google maps it will give you a listing of local restaurants around the area code 92106.
  • To get your site to do this, add it to Googles Local Business Center Click here to add your site

Helpful tips:

  • Get the word out by adding your URL to any account you have online (facebook, myspace, youtube account…)
  • Help people out on forums (people wit questions) and have your URL in your signature, Don’t spam. Help and they will come.
Rate this post:
(1 votes, average: 4.00 out of 5)
Loading ... Loading ...
Jan 16

Simple CSS Rollover with A Single Image [Tutorial]

Posted on Friday, January 16, 2009 in Tutorials, Web Design

This will be our final result using only one image. (you can download exercise files at bottom)


“Rollover me!” -says Mr.Elephant
(you can use any image you would like, not just a super cool elephant and zebra…)

How to do this? LET’S GO!

In simple terms: We are displaying only the left side of the image hiding the right half, then on rollover we are moving the image half way over to display the right side.

1. Create an image twice as wide as the size you’ll need. The left side of the image will be the non rolled over image and the right half will be the rollover part of the image.

Below is the original image.
rollover_image(260width x 108height)

2. Below is the HTML code used, make sure it has a class so our CSS code knows where to look. This will act as our CSS placeholder for the rollover image.

<a class=”imageRollover” href=”#”> </a>

3. Now for the CSS that will do the magic. Let’s get the image to look like we want when nothing is rolled over:

a.imageRollover {
background: url(“rollover_image.jpg”) no-repeat; (This is the image to be used 260×108)
display: block; (this will display the entire image)
width: 130px; (display 130px wide, half the size of our image)
height: 108px; (display 108px high)
text-decoration: none; (This takes off the default styles used on links)
}

That will display the left half of our image. Now, we want to move our image 130px (half our image width) to the left to reveal the right side when rolled over.

a:hover.imageRollover {
background-position: -130px 0;
}

This moves our image 130 pixel to the left on :hover (note: background-position: Xposition Yposition)

That’s all there is to a single image rollover in CSS. ENJOY!

>>DOWNLOAD THE EXERCISE FILES HERE

Rate this post:
(2 votes, average: 5.00 out of 5)
Loading ... Loading ...