iPhone ‘Add to Home Screen’ Custom Icon
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!
(2 votes, average: 5.00 out of 5)
Loading ...CSS Box Model
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:
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.
>>Be the first to rate! Loading ...CSS Reference Guide
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 |
>>Be the first to rate! Loading ...Tips To Design Better Banner Ads
- Use the words “Click Here” or “Enter” every time you design a banner.
- 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.
- Animate Your Banners.
- 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.
- Use an awesome headline in your banner.
- 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.
- The best word to use in your banner headline is “FREE.”
- 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.
- Change your banner ads frequently.
- 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.
- Be clear in your graphics and messaging.
- 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.
- Less really is more.
- 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.
- Use contrast to capture attention.
- 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.
(2 votes, average: 5.00 out of 5) Loading ...Designing Effective HTML Emails
- 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!
(2 votes, average: 5.00 out of 5) Loading ...Outsourcing, A Magical Unicorn…
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:
- The coder had to have a rating of at least 9 out of 10.
- 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.
(2 votes, average: 4.50 out of 5) Loading ...Google Simple, Apple Elegant
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.
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.
(2 votes, average: 5.00 out of 5) Loading ...10 SEO Tips [that work]
Here is a list of SEO methods I find help crack the magical SEO challenge of getting your website higher up in the rankings.
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:
- Google + SiteMap = Love
- Create a sitemap via XML-Sitemaps
- Link to your sitemap here via Google Webmaster Tools
Submit your site:
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.
(1 votes, average: 4.00 out of 5) Loading ...Simple CSS Rollover with A Single Image [Tutorial]
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.
(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
(2 votes, average: 5.00 out of 5) Loading ...