50k-site build: September 2013

Sunday 29 September 2013

Text line length - The Ultimate Guide to Golden Ratio Typography

The Ultimate Guide to Golden Ratio Typography

"Obviously, doing a bunch of math every time you deal with typography will get tiresome very quickly.

To remedy this, I’ve created the Golden Ratio Typography Calculator, which makes it incredibly easy to determine the perfect typography for any situation!"

Right now, there’s a mathematical symphony happening on your website.

Every single one of your readers is subconsciously aware of this symphony, and more important, they are all pre-programmed to respond to it in a particular way.

The question is this:

Is your site’s symphony pleasing and inviting to your readers, or does it turn them off and make it harder to communicate with them?

The Mathematical Symphony of Typography

As it turns out, this symphony is not unique to websites. You “hear” it every time you read a book, newspaper, magazine, or web site—every place where typography exists.

At first glance, you might think that typography and math have nothing to do with one another. After all, typography consists of letters and words, and math is…well…numbers.

But the truth is, typography is a combination of artistic letterforms and mathematical proportions, an exquisite marriage of form and function.

When the mathematical proportions of your typography are harmonious, your site—and your content, specifically—look appealing to readers.

Conversely, when the proportions of your typography are imbalanced, your content isn’t as attractive to readers, and your site seems cluttered and disorganized.

The bottom line is this:

The mathematical proportions of your typography are vitally important to how readers perceive both your site and your content.

So how can you tweak the proportions of your typography to create a beautiful mathematical symphony?

Let’s take a trip down the typographical rabbit hole and find out!

The 3 Fundamental Dimensions of Typography

Every paragraph you’ve ever seen has 3 primary dimensions. The first two, font size and line height, are vertical in nature.

Figure 1. How font size and line height work in web browsers. Font size is measured from the top of a capital letter (S) to the bottom of descending characters (y). Half the line height extends both up and down from the centerline of the text.

The third dimension, line width, is horizontal.

Figure 2. Line height and line width form the vertical and horizontal dimensions of typography.

Taken together, these 3 dimensions are responsible for how you perceive typography.

To get a feel for how these dimensions work together, it’s helpful to look at a few text samples where one dimension is varied and the others are held constant. This way, you’ll be able to see the effect that each dimension has on the other two.

In Figure 3 below, the line height and line width are fixed, and the font size is varied from 13 to 16px.

Variable font size with constant line height and line width

Figure 3.

With the line height and line width held constant, it’s clear that larger font sizes require larger line heights to maintain both proportion and readability.

In the first paragraph of Figure 3, the line height is large enough relative to the font size to produce generous whitespace between the lines of text. However, in the second paragraph, the line height is not large enough relative to the font size to yield sufficient whitespace, and it looks cramped as a result.
This leads to an important conclusion: As font sizes increase, line heights must also increase in order to maintain the geometric proportions of a paragraph. In other words:

Font size and line height are proportionally related.

In the next example, the font size and line height are fixed, and the line width is varied from 233 to 466px.

Variable line width with constant font size and line height

Figure 4. As the line width is increased, the text becomes harder to read because the line height has not been increased to offset the effect of the width.

Despite the fact that the line heights are the same in the two paragraphs of Figure 4, their readability is quite different because of the differing line widths.

As the line width gets longer, it becomes more difficult to perform a return sweep (the movement of the eyes from the end of one line to the beginning of the next) unless the line height is also increased to account for this effect.

Research confirms this conclusion, too. In a 2004 study from the University of Reading (how ironic), Mary C. Dyson states:

Long line lengths are said to need more interlinear spacing to ensure that the eyes locate the next line down accurately when executing a return sweep…

Bottom line? It’s clear that line heights and line widths are mathematically related in some way. More specifically:

For any font size, the line height must increase as the line width increases.

But what is the exact mathematical nature of this relationship?

Harmonious Proportions and the Golden Ratio

Answering this question might be easier than it first seems because nature has given us a remarkable blueprint for beautiful and effective proportionality.

Evident in plants, animals, the shape of galaxies, and even your DNA, this proportionality blueprint is so pervasive that humans have noticed it for thousands of years. We’ve used it, too—it can be seen in art and architecture throughout history.

So what is this incredible proportion that “really ties the room together?”

I’m talking, of course, about the golden ratio.

When nature needs a proportion to relate things and to provide order on any scale, it tends to use the golden ratio.

With typography, the goal is to relate font size, line height, and line width in an aesthetically pleasing and orderly way.

Could it be, then, that the golden ratio is applicable to typography as well?

The Mathematics of Golden Ratio Typography

As you probably guessed, the answer is an emphatic yes! Here’s how it works:
First, the font size (f) and line height (l) are proportionally related through a ratio (h). Mathematically, this is about as simple as it gets, and the basic equation looks like this:

In the equation above, the optimal line height is produced when h equals the golden ratio (φ). This insight gives us the following equation:

Unfortunately, just knowing the optimal line height for a given font size is not enough.

Earlier, you saw that all 3 typographical dimensions—font size, line height, and line width—affect one another. Therefore, you cannot talk about line height or font size without also considering the line width.

Based on this reasoning, there must also be an optimal line width that corresponds to the optimal line height from the equation above.

Problem is, you don’t know the exact relationship between line width and line height. All you know for sure is that the line width is significantly greater than the line height.
With the help of basic mathematical modeling, you can make an educated guess that the relationship between the optimal line height and line width is exponential. Here’s the simplest equation to express that:

This is remarkable because now, for the first time, you have a solid mathematical basis for the relationship between font size, line height, and line width.

Note to designers: Golden Ratio Typography is intended to serve as a basis for proper typesetting. Factors such as x-height and other typeface metrics also influence typography and should be considered in finalized designs. Golden Ratio Typography provides the most rational starting point for adjustments of this nature.

There’s one little problem here, though: The web isn’t nearly as precise as these equations.
You see, web designers are constrained to using integer values for things like font size, line height, and line width (this will be the case until sub-pixel rendering becomes a reality).

The above equations all yield highly precise decimal values, and simply rounding the answers to the nearest integer produces significant errors that will cause your resulting typographical proportions to be imprecise.

The bottom line is that the web is not optimal, and therefore, the optimal equations presented above are insufficient for fine-tuning your typography in the real world.

Ultimately, if you want precise Golden Ratio Typography on your website, then you’re going to need some tuning equations.

Fine-tuning Golden Ratio Typography for the Web

To understand how typographical tuning works, let’s look at an example.

For a font size of 16px, the perfect line height is achieved when h equals the golden ratio. This yields a value of 25.88854px for the optimal line height. Using this value, you can then determine that the associated optimal line width is 670.21670px.

If you tried to use these values in your site’s CSS, you’d encounter problems.

Because it only resolves integer values, the web cannot display a line height of 25.88854px. Instead, the best you could do for the line height is 26px.

But 26px is greater than the optimal line height given by the equations, and as you’ve seen, you cannot change the line height—not even a little bit!—without also changing the associated line width (otherwise, the resulting proportions would not be precisely “golden”).

Therefore, the process of rounding the line height from 25.88854px to 26px requires that the resulting line width be greater than 670.21670px.

This is the essence of typographical tuning:

If your line width is shorter than the optimal width, then your corresponding line height must be less than the golden ratio. Conversely, if your line width is longer than the optimal width, your corresponding line height must be greater than the golden ratio.

Here’s a graph to help illustrate this concept for the most commonly-used font sizes:

Line height vs. line width for common font sizes

Figure 5. As line widths increase, line heights must also increase to preserve geometric proportions and readability. The horizontal gray line in this graph represents the golden ratio (φ), and you can see how line heights behave relative to this value for the most commonly-used font sizes. Click to enlarge.

Mathematically speaking, the typographical tuning equations are more complicated than the equations you’ve already seen. Fortunately, I’ve done the heavy lifting here, so you can focus on the concept and the results.

Ultimately, you need two tuning equations for the different scenarios you will encounter while setting typography. Depending on the situation, you’ll need to determine:

The adjusted line height, given a font size and line width
The adjusted line width, given a font size and line height

Here are the equations to do just that:

Line height ratio tuning equation

Using the second equation above, you can determine the adjusted line width for the aforementioned example situation of a 16px font size with an integer line height of 26px.

Adjusted line width for 16px font with a line height of 26px

The adjusted width, which will maintain golden typographical proportions for this scenario, is 685.32505px. For use on the web, this must be rounded to 685px.

Let’s look at another example that will hit closer to home (and this is how you can tune the typography on your own website right now):

What if you wanted to use a 16px font size in a content width of 550px? What should your adjusted line height be in this case?

Here’s how you’d solve that problem:

Sample line height ratio calculation

The answer here is 25.00169px. Once again, this value must rounded to the nearest integer for use on the web, and this results in an adjusted line height of 25px.

Golden Ratio Typography Calculator

Obviously, doing a bunch of math every time you deal with typography will get tiresome very quickly.
To remedy this, I’ve created the Golden Ratio Typography Calculator, which makes it incredibly easy to determine the perfect typography for any situation!

Smart and versatile, the calculator will give you golden typographical recommendations based on the input you provide.

If you enter only a font size, the calculator will show you the optimal line height and line width for that font size.

If you enter only a width, the calculator will show you the best and second-best font size/line height combinations for that width.

If you enter both a font size and a width, you get the whole shebang:

Optimized typography for your font size and width
The best typography for the width you’ve provided
The second-best typography for the width you’ve provided
The optimal typography for the font size you’ve provided

Go play around with the Golden Ratio Typography Calculator and explore finely-tuned typography like never before!

The Incredible Impact of Golden Ratio Typography

I hinted at this earlier, but I want to make it clear: The stuff I’ve shared with you today doesn’t just apply to the web. In fact…

Golden Ratio Typography can be used to fine-tune the typography of any medium!

Books, newspapers, magazines, websites, e-readers, you name it—they can all benefit from the improved proportions that Golden Ratio Typography provides.

And now, as you begin to view the world through the lens of Golden Ratio Typography, you’ll notice countless opportunities for typographical optimization.

The Bottom Line

Golden proportions are evident throughout the universe, and they occur in places where form and function combine to produce a beautiful, effective, and useful result.

Remember the mathematical symphony of typography?

By employing Golden Ratio Typography, you’ll ensure that your site has a golden symphony that will appeal to everyone.

Thursday 26 September 2013

How to link from one part of a page to another part of the same page in RapidWeaver

Making a link that jumps to a different place on the same webpage

To jump from one part of a page to another, you need two things; a bit of code that forms the link, and another bit of code that is at the destination of the jump. So, in the part of the page you want to be the jump link, you put: <a href="#destination">Jump to destination</a>
That will give you a link that looks like this:

Jump to destination

And at the place you want to jump to, you’ll put this code: <a name="destination"></a>
I’ve put that last bit of code right at the bottom of this long page of gibberish; if you click the “Jump to destination” link above, you’ll see it work. I’ve also put a “pagetop” link at the bottom, which will bring you back to the beginning of this article.

Important:

When you’ve entered the code in the places you want it, be sure to select each piece of code and go to the Format menu and choose “Ignore Formatting”. This tells RapidWeaver not to display the code as it is written, but to execute it like the HTML it is.

I’ve used arbitrary names above; you can actually use any name you like, providing the link name has a hash in front of it and the destination name is the same. So you could call it “pagebottom” instead of “destination”, and then your code will look like this:

<a href="#pagebottom">Jump to bottom of page</a> and the code you’d put right at the bottom of the page would be: <a name="pagebottom"></a>

Note too that where it says “Jump to bottom of page”, that is how the link will actually appear on the page. You can change this to whatever you like, providing the link and destination code names are the same.

html - What is href=# and why is it used? - Stack Overflow

html - What is href=# and why is it used? - Stack Overflow

On many websites I often see links that have href=#. What does it mean? What is it used for?

asked Jan 31 '11 at 19:34

Mark Rucker
1,575626

Samir Ghobril edited Aug 20 at 19:25

Answer

active oldest votes

up vote 26 down vote

Putting the "#" symbol as the href for something means that it points not to a different URL, but rather to another id or name tag on the same page. For example:

<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>

However, if there is no id or name then it goes "no where."
Here's another similar question asked HTML Anchors with 'name' or 'id'?

Saturday 14 September 2013

10 Best Google Font Combinations You Haven’t Tried Yet | Web Designer's Journey

Posted on June 2, 2013 by webdesignersjourney

So what do we have here? Another “top-best-professional-ultimate-super-Google-font-combinations-you-must-try-before-your-rabbit-dies“? WELL, HELL YES. The thing is, pairing fonts and make them look good together is hard as moving on from a break up. Damn..

I’ve spent 10 centuries figuring out beautiful Google font combinations so you might want to take a look. So here’s my compilation of modern font combinations and don’t forget to pass it on to your grand-kids:

Font pairing summary:

1. Libre Baskerville and Ubuntu - best Serif and Sans serif font pairing. It’s like bacon and eggs. Both font families offers great variation though.
2. Bree Serif and Imprima – This pair conveys young, feminine, and modern look. So if you’re a chick, use this. Great font combination for blogs.
3. Montserrat and Pontano Sans – a great Google font combination with Montserrat. Good for young businesses, web design agency, portfolio, etc.
4. Oswald and Muli – Tall and bold header paired with thin and wide body text. This style is popular for landing pages.
5. Pt Serif and PT Sans – using the same font family will never fail you yet this is a good sample of professional font combo
6. Volkorn and Raleway (Light) – classic yet sexy pair of bold serif and thin body text. A luxury font combination.
7. Roboto Sans and Roboto Sans (Light) – same font family of sans serif gives you the young look to your site
8. Josefin Slab and Maven Pro – a feminine Google font combo. sweet and sexy! Great font for fashion websites.
9. Oxygen and Source Sans Pro – This two is not that popular but look how these two fonts look good together!
10. Paytone One and Droid Sans – a fat slab fancy headline and a flexible body text. Great for food blogs!
Conclusion: I’ve shed enough blood for this so if you have ideas to make them better, I’ll marry you.

5 More Best Google Web Font Combinations 2013 (webdesignersjourney.wordpress.com)
What the Font? FontPro Makes Choosing Fonts Easy (technorms.com)
Download Google fonts to your desktop (googledevelopers.blogspot.com)

Health buff? http://www.healthtrainingguide.com

5 thoughts on “10 Best Google Font Combinations You Haven’t Tried Yet”

Tuesday 10 September 2013

Web fonts vs Commercial fonts + 150 great web typefaces

May 31st/2011

Commercial fonts or free fonts?, this is a big dilemma that afflicts many designers as they find difficult to decide between beautiful but expensive fonts such as Helvetica or Futura and free fonts like the ones featured on Google Web Fonts, which also have a really nice design but will never be like the originals.

This post more than being an extensive article where we discuss the benefits of free and commercial fonts wants to offer you a pleasant time through an amusing game where you must choose between different options and find out which option is the correct, just like the old Pepsi vs Coke commercials that we saw many years ago. Let’s see how much you know about typefaces!. After the game, you will find a great list featuring some of the nicest web fonts available nowadays for your inspiration. Also if you like these fonts you will find pretty useful our last project Best web fonts, a handpicked selection of the best fonts from Google web fonts.

The exercise goes like this: In every point you’re going to find two typefaces, one commercial and one from the Google Web Fonts library, you must try to guess which option corresponds to the original commercial font, let’s see how much do you know about typefaces.

[see original article for more]

Essential Guide to @font-face - RapidWeaver & Web Design

RapidWeaver & Web Design - The Essential Guide to @font-face

The Essential Guide to @font-face: “

Fonts on the Web

The days of being limited to a handful of fonts on the web are very close to being a thing of the past. The problem is no longer a lack of viable solutions, but rather, an abundance of them.
Technologies like Cufon, sIFR, FLIR and @font-face all represent different groups of developers placing bets on what they believe to be the future of web typography.
There is, as of yet, no consensus in this ever-evolving game. All of these methods have perfectly valid arguments both for and against their use.
Further, even the most popular browsers support each of these technologies in widely varying degrees.

However, the @font-face CSS method is among the strongest, simplest and most flexible competitors in this game. It seems to be the current rockstar of the bunch, garnering all the attention and causing a number of sites to pop up offering both free and premium fonts in support of it.
This guide will teach you how to implement @font-face with cross-browser compatibility and will also look at a number of the supporting services that have arisen, making it even easier to use custom fonts in your web designs.

Licensing and Free Fonts

Font licensing presents one of the largest headaches and stumbling blocks to great typography on the web.
Naturally, font foundries would like to be paid for their work and therefore place strict restrictions on the use of their fonts.
These foundries have teamed up with various premium @font-face solutions that we’ll discuss later in the article, but for now, we’ll just dodge the licensing problem completely by using a free font.
The web font licensing problem has caused a major rise in the popularity of sites offering quality free fonts. Among these, the two that I like the best are Font Squirrel and Fontex. These sites both provide tons of great resources absolutely free and even share many of the same font choices.

The Basic Syntax

@font-face only requires a few lines of CSS and is therefore very easy to use without any third party tools.
To get started, stop by one of the free font sites mentioned above and download Chunkfive (or any other font you like).
Once you’ve downloaded the font, place the font file in the root directory of your web page.
Now, go into your stylesheet and insert the following code:

@font-face {
 font-family: Chunkfive;
 src: url('Chunkfive.otf');
}

This snippet gives the custom font an identifier for the rest of your CSS and then points to the font file to use when this identifier is mentioned.
The first line in my code sets an identifier of ‘Chunkfive’ to the font. It’s best to keep things simple by always using the font name, but you can ultimately use any name you want. ‘MyReallyCoolFont’ would work just as well as long as you refer to the font elsewhere using the same name.
The second line tells the browser that when ‘Chunkfive’ is called, it should load the font Chunkfive.otf file from the url mentioned. This url is simply wherever you choose to place your fonts file. If you had placed Chunkfive in a folder called Fonts, this attribute would’ve read url(Fonts/'Chunkfive.otf').
When you want to use that font anywhere in your site, simply build a font stack like you would normally, using your custom font identifier at the beginning.

font-family: Chunkfive, Georgia, Palatino, Times New Roman, serif;

It’s important to set up these fallbacks in case the custom font doesn’t work for some reason.
Make sure to test your design in at least one of your fallback fonts to ensure that it doesn’t cause your layout to break.
Depending on your browser, this should give you a page with a working custom font.
The text should load immediately, is fully selectable and should work with copy/paste computing functions (a limitation of of other font replacement techniques).

A screenshot of using Chunkfive on a block of HTML text.

Cross-Browser Compatibility

It would be nice if using custom fonts online were that easy, but it isn’t.
Of course, we can’t possibly expect all the browsers to play nice and agree on a given solution! That would just be unreasonable.
Instead, all the major browsers have decided to go their own way with font formats that they choose to support^[1].

Internet Explorer only supports EOT
Mozilla browsers support OTF and TTF
Safari and Opera support OTF, TTF and SVG
Chrome supports TTF and SVG.

Further, mobile browsers like Safari on the iPad and iPhone require SVG.
Confused yet? You should be. Fortunately, there are brilliant developers that have worked this all out for you by developing simple systems to follow.
The most popular method of utilizing @font-face across multiple browsers seems to be Paul Irish’s Bulletproof @font-face syntax.
Using Irish’s method, you include multiple versions of the font so that it works on all browsers.
In addition, the code contains a little trick that ignores locally-installed fonts with the same name. Though it is much faster to load a local font, it’s been largely agreed upon that doing so can often have messy results^[2].
Let’s take a look at the Bulletproof Syntax using Chunkfive:

@font-face {
 font-family: 'ChunkFiveRegular;
 src: url('Chunkfive-webfont.eot);
 src: local(‚ò∫'),
    url('Chunkfive-webfont.woff') format('woff'),
    url('Chunkfive-webfont.ttf') format('truetype'),
    url('Chunkfive-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}

As before, we first declare an identifier for the rest of our code.
Next, we refer to the EOT version of the font for IE. If the browser is not IE, it will ignore this and move down the line until it finds a font type it can actually use.
The src:local bit is the local font trick I mentioned above. It essentially tells the browser to use a fictional font name that won’t be present on your machine so there is no mess from the wrong font being displayed.
Finally, setting the font-weight and font-style to normal here will ensure that all browsers default to the same values. This makes it so that you can apply a faux bold or italic style later in the CSS. Without this snippet, Webkit browsers will ignore any weight or style commands.
Keep in mind that font rendering can vary widely across browsers and operating systems. Many developers have experienced such poor results from Windows and Internet Explorer that they avoid using custom fonts altogether. Always be sure to examine your results closely on all the browsers that you can to decide if the quality is acceptable.

Where Do I Get All Those Font Types?

You’ve probably noticed that the method above requires you to have at least four different versions of every custom font that you use. Many font sources, such as Fontex, will frequently only provide one file type in a download. So what do you do when you only have a single font file?

Font Squirrel

The answer is to add Font Squirrel to your list of new favorite sites. Font Squirrel offers tons of free @font-face kits that are essentially a one-click download for everything you need to get going with custom, cross-browser compatible fonts.
Each kit includes all the font types you need as well as demo HTML and CSS files to get you started.
All you need to do is download the kit, grab the font files and CSS snippet, and you’re ready to go! The CSS used by Font Squirrel is based on Paul Irish’s bulletproof @font-face syntax shown above so you can be confident that it’s the best method currently available for ensuring compliance for as many users as possible.

@font-face Kit Generator

What if FontSquirrel doesn’t have the kit you need? No problem. If you have a font that you obtained from another source, simply stop by the Font Squirrel @font-face kit generator. All you do is upload your font file and this amazing tool will automatically convert it to all the necessary file types and generate a kit for you to download.
Note that using the @font-face Kit Generator means that you’re guaranteeing that you have the rights/license to convert and embed the font files you upload to the site.
This service is completely free and you can use it with zero sign up.
screenshot

Popular @font-face Services

As I mentioned at the beginning of this article, several services have popped up offering both free and premium solutions for simplifying the @font-face process.
Below is a list of some of the most popular services currently available.

Google Font API

The Google Font API is one of the easiest and newest solutions for inserting custom fonts into your designs.
Using this API, you simply choose a font from the Google Font Directory and grab a snippet of code to insert into the <head> tag of your HTML documents. Afterwards, you can refer to the font in your CSS just like any other font you use normally, no @font-face CSS required (it takes care of all this behind the scenes).
All of the fonts in the Google Font Directory are free and open-source. The downside is that there are currently less than twenty options available. The Google Fonts API also neglects to include an SVG version so there is currently no support for mobile devices.
Read the Six Revisions guide on using Google Font API.

TypeKit

TypeKit was one of the first services to launch dedicated to making @font-face easier to implement. The TypeKit team has partnered up with font foundries from all over the world to provide hundreds of excellent fonts with zero licensing complications for as long as you use the service.
There is a free trial plan that allows you to use a limited number of fonts on a single website.
Paid plans range from $24.99 per year for two sites all the way to $99.99 per year for an unlimited number of sites.

Typotheque

Typotheque allows you to purchase any of their fonts for web use. The nice thing about this service is that instead of a yearly plan, there’s only a one-time fee for purchasing the font. Once you purchase the font you want, just copy and paste the provided CSS and you’re done!

Fonts Live

Fonts Live is yet another service that takes care of the complicated licensing hassles while bringing you hundreds of high-quality fonts from the best designers and foundries.
With Fonts Live, you purchase each font individually and pay a yearly subscription fee for the use of the font. Once you purchase the font, you are provided with the simple code snippets necessary to embed the fonts into your site.

Kernest

The Kernest system is nearly identical to that of the Google Font API. Simply find a font you like, grab the link to embed into the <head> tag of your HTML documents and you’re all set to start using the font in your CSS.
Kernest has lots of both free and premium fonts available. Unfortunately, the browsing system on Kernest.com attempts to load lots of these fonts simultaneously and can therefore be painfully slow and difficult to use. Prepare for a browser crash if you stumble onto a page with too many font previews.

Wrapping Up @font-face

You should now be fully armed to begin using beautiful custom fonts in your web designs. Using just a few lines of CSS and a free web service (or host your own files as outlined above), you can generate your own @font-face kits that work on most major browsers and won’t cost you a dime to implement.
If the free solutions don’t provide enough options and thinking about font licensing gives you a headache, check out the services above that take care of the complicated legal stuff, and even most of the code, making it extremely simple for you to use premium fonts online.

References

About the Author

Joshua Johnson is a Graphic Designer/Web Designer with over six years of experience working with a major international marketing agency. He is also the Editor of Design Shack, a web design and development blog. Check out his recent work and follow him on Twitter: @secondfret.

Tuesday 3 September 2013

Create a Web Clip Icon for iPhones - For Dummies

By Janine Warner, David LaFontaine, and Lee Andron from iPhone and iPad Web Design For Dummies

How to ...

Here’s how you create a Web Clip icon and specify it in the code of your page:

Use a graphics program, such as Photoshop, to create the image you want to serve as your icon.
The image should measure 114-x-114 pixels and be saved in the PNG format.
Note: High-resolution devices display the icon at 114 x 114. Older iPhones display it at 57-x-57 pixels, iPads display 72-x-72 pixels. You can create one of each size, or you can let the device scale down the image automatically. Also note that you can use a JPEG image, but if you want to make sure the icon works on all devices, saving it as a PNG image is the safest option.
Name the image apple-touch-icon.png and upload it to the root directory of your website.
(Optional) If you want to save the image in a subdirectory or you want to use a different Web Clip icon for the home page than you use for internal pages in your site, you can add this code to the <head> section of any web page to specify the name and location of the image.

<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />

Background

Much like you can bookmark web pages in a desktop browser, you can save a link to any web page on an iPhone or iPad by clicking the Export icon circled in red in the top figure and then choosing Add to Home Screen, as shown in the bottom figure.

A Web Clip icon looks just like the icons that come with native iTunes apps. When a visitor to your website adds a Web Clip icon to her Home screen (the desktop of her device), it creates a link to your website, much like a bookmark in a desktop web browser.

This Web Clip icon gives your visitors a great shortcut back to your web site, and it’s a powerful way to keep them thinking about you. Unfortunately, many users of the iPhone and iPad don’t even realize it’s possible to save a link to a website in this way.

Here’s how it works: When a user taps the middle button in the button bar at the bottom of the iPhone or iPod touch, Safari offers several options.

When you choose Add to Home screen, a small image, called a Web Clip icon, is saved to the Home screen of the iPhone or iPad with a link to the web page. This link makes going to a website by clicking an icon just as easy as launching an app. Click a Web Clip icon, and the iPhone and iPad launch Safari and open the page in a browser in one slick action.

As a web designer, you can create an image to serve as your Web Clip icon. If you don’t, the iPod touch, iPhone, or iPad saves a screenshot of whatever is displayed on the screen and uses that as the icon. It's a good idea to go to just a little extra effort and specify the image that you want to use as the icon on the Home screen.

In this figure, you can see a Web Clip icon created from the main image used in this design. This image is cropped and simplified to serve as a better icon than a screen capture of the entire page, which would include the text and other images at such a small size that they would be impossible to read.

Monday 2 September 2013

Web And Design Trends 2013 | ByPeopleByPeople

This is why a clean 960px grid still rocks (give a chance to 1200px too)

Studies reveal as a matter of fact, that many users are switching to even wider screens and higher resolutions, so designing in yet old 960px grid is a good choice, but have in mind that 1200px grid layouts can become more popular. 16:9 aspect ratio screens are becoming a trend instead of the 4:3 ones, this will make in the long run absolutely worth to take advantage of that leftover space.

More users prefer widescreen resolutions

Statistics show how 1024×768 resolution (4:3) has been decreasing its popularity, contrasting with the 1366×768 resolution (16:9) that has been more popular.

Of course the idea of the 1200px grid is not new at all, but it’s not widely implemented due to the common belief that 4:3 resolutions are still the main rule referring to big screen devices such as PC’s and their portable variations. There are nice tools like Boilerplate which allows the creation of content from the 1200px grid, but can be customized to start from 960px or any width.

Another one is Percentage based CSS grid system, which dynamically adjusts responsive content starting from a 1200px layout, and it turns out to be a nice approach. Hence, if you’re having huge expectations and want to take advantage of a widescreen resolution, think outside the 4:3 box, and get used to this idea because it will become trendy for sure.

Sunday 1 September 2013

Feeling blue: why tech designers may want to give the color a rest — Tech News and Analysis

By Rani Molla

Jul. 10, 2013 - 1:24 PM PDT

3 Comments

Summary: The color blue is ubiquitous in tech design — maybe too much so. How we got so hooked on the color may have to do with biological evolution.

In the tech world, it seems like blue is everywhere. Many of the big-name tech companies—Facebook, Twitter, LinkedIn, Tumblr, Skype, Pandora, the list goes on—use blue for their logos, interfaces and design. Of the Apple’s top-25 all-time top free iPhone apps, more than half are blue.

These days, tech companies believe strongly that design is a value-added part of their products. So with all of that attention to design, why are they so blue?

We’re less aware of changes with blue

Sarah Allred, an assistant professor of psychology at Rutgers University and a specialist in color perception, says we notice aberrations less in blue. Blue has the shortest wavelength of any color. At very short (blue) and very long (red) wavelengths, the differences between cone photoreceptor responses are smaller, causing people to be less sensitive to small changes in light. The result of decreased sensitivity is increased stability in perception.

That means that very small differences in execution won’t be as noticeable for blue as with other colors—which could make it a good choice for continuity over multiple platforms and diverse branding.
Also, Allred says that lab findings consistently show that people associate the color blue with feelings of “peace and clarity. ”

As to why blue elicits peace and clarity, Allred said, “there is less agreement.”

And then there’s the theory that our fondness for blue is evolutionary. “The idea would be that over the course of evolutionary history, our mammalian ancestors who sought out blue were better able to survive, since lots of blue (water, open sky to see potential predators, etc.) indicated a good physical environment,” she said.

Those same evolutionary theories of color preference cause people to associate the color red with negative emotions such as rage and danger—not exactly what you want to promote your social media app or tech site.

Blue is safe

Neil Wehrle, VP of user experience at the NYC incubator Betaworks, and his team have created numerous mobile apps for a wide range of tech companies. He says blue is frequently the go-to color.
“In the Western world, blue has a connotation of stability,” Wehrle said, adding that it’s a self-reinforcing trend. “I think there’s sort of a process of familiarity where designers at some point are used to seeing a blue icon and subconsciously incorporate it into their icon and app design as well.” There may also be an element of: Blue worked for all these other popular companies — it will surely work for my business, too.

Wehrle also points out that different hues of blue have different connotations. “Darker blue is a little more conservative; lighter blue is more energetic.” None of the connotations are bad.

blue

Do we want conformity?

For a brand-new app that hasn’t been tested yet, blue can be used to help people feel more comfortable with the product. It makes it seems safe and reliable, like all the time-worn blue icons in your app doc. But conformity has negative sides, too.

Especially in the tech sector, where companies are supposed to be revolutionizing the way we live, the status quo seems lazy, if not cowardly. If companies are afraid to innovate even their design, why should we believe innovations in their actual business are substantive?

Also, using the same color makes it difficult tech companies to stand out from the crowd. Already many apps feel derivative: an Instagram of this, a Pinterest of that. One app or icon appears just like the next.

The hesitance to change, however, is understandable. Complaints shrieked through the Twittersphere when Apple unveiled its new design for iOS 7. But when all the hubub settles, designers will eventually embrace iOS 7, making flat icons and pastel colors the new norm.

Until then, get used to blue.

We’re holding our annual RoadMap conference in November in San Francisco, which will focus on experience design for the tech industry (tickets will go on sale shortly).

How to Use Parallax Stacks in RapidWeaver

Published on 4 Jun 2013

Parallax Stacks is available for Stacks (v 2.0+) at http://onelittledesigner.com

This stack overrides theme styling and creates a beautiful parallax animated and smooth sliding navigation page. Easily add background and foreground images into Parallaxing sections.

Live demo at http://www.onelittledesigner.com/rapi...

Making Animated Webpages with Parallax v2.0 in RapidWeaver

Published on 17 Jul 2012

Parallax greatly simplifies the use of advanced CSS3 animations and transitions - it's drag and drop simple without any coding knowledge required. For the free version of Parallax, visit http://www.nimblehost.com and join our mailing list.

10 Infographic Tools to Drive Traffic » Web Marketing Today

10 Infographic Tools to Drive Traffic » Web Marketing Today
March 22, 2013 • Kevin Webster

High quality infographics can be an excellent source of website traffic. It’s becoming easier for businesses without a design staff to create interesting and attractive representations of data that will be important to their customers and prospects. Here are 10 tools that can help you create traffic-driving infographics.

Visual.ly

Visual.ly allows infographic designers to share their work, and also provides a design platform for people without design skills to create attractive infographics on their own.
—

Many Eyes

Created by IBM, Many Eyes allows you to upload a data set — the information you want to visualize — and then select a style, to present it as a graphic.
—

Gephi

Gephi is a Photoshop-like application that arranges data in visual patterns. While it’s a stretch to say it creates infographics, it can assist you in visualizing and understanding data. Once you understand your data, you can use another, enhanced tool to display that data to your audience.
—