AOD, Author at Art Of Developing

Typography – A Mathematical approach in Web design

In web design there is always a time where we have to decide the dimensions of our web page but which are the correct dimensions? In which criteria do we choose these proportions?“Decision based in Instinct is memory in disguise”.

Proportions that recurring in books for centuries, are chosen based in mathematics and the arts! Pages created based on geometric figures and numbers such as φ (golden ratio) or π and the diatonic scale for music it is proven to actually be more pleasant to the eye or to someone’s mind.

Sizing, spacing and intervals used in the same way they used to music or in a painting to fill up the empty space, are based on a more general pattern used in nature. As shapes that can be found in nature seem to make more sense to our perception the same thing also apply when creating the layout of a web page. Emotions can be derived from and be driven by a page’s ‘geometry’.

The Golden Ratio example

The theory: Two quantities are in the golden ratio if, the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one.

It is also proven that the small quantity is always the 38.2% and the large one is the 61.8% of the whole (Just divide 10 with φ, 10/1,618 = 6,18). If for example we had a straight line with width of 10px, it applies: 10/6.18 = 6.18/3.82 = φ ≈ 1,618

The Golden Ratio is almost everywhere in nature. We can also find the Golden ratio in the Fibonacci series (a series of numbers where the sum of the preceding numbers gives us the next number).The division of two of these consecutive numbers tends to φ ≈ 1,618. Some of the widely used ratios for pages, such as 2:3, it actually gives us the φ number and is part of the Fibonacci sequence (0,1,1,2,3,5,8…).

Tschichold, by whom the laws of form of book page construction was popularized in the mid of 20th century, based his theory of the page proportions in the Golden Ratio (using mainly 2:3 proportions).

Τext area proportioned near the golden ratio, 2:3

More widely used proportions are also:

• 1 : φ

• 1 : √2 (the ratio of A3, A4, A5 paper, etc.)

φ in web pages

In the same way that these rules apply in books, they also apply in web pages. You could create for example a pleasant web page divided in the already known sections (header,menu,main content,sidebar,footer) based in these analogies.

For example if you divide the width of your page with φ, you can use the result as the size of the main content area and the rest as the size of your sidebar which is the same as the analogy we saw previously, 61, 8% – 38, 2%.

You can also apply this rule to the width of other elements for finding their height (width/φ = height).

Who said mathematics aren’t useful..?

You can read more about harmony in typography here.

June 17, 2014

Meta Tags & Headings – SEO Principles Round 1

SEO or Search Engine Optimization is a term that describes all the technics you can use to make your websites have better search results, without having to pay anything for it. Starting from this article we are going to examine everything we can do to make this possible.

Just to give you an idea, some of the things that can play a significant role or can affect your site’s search results are: Page Titles, Meta Tags, Links (Internal & Inbound), Headings (H1,H2..), Page Content, Anchor Text, Sitemaps, Breadcrumb Navigation, Alt attributes, URL’s structure, Site’s Structure, Geo-Location, Small Page Load Time – Server Location, changing Domain or changes to Navigation…OK, You get the picture.. So let’s start with a couple of those.

1.Titles and Meta Tags

Titles and all Meta Tags are based in Keyword Research. This means that, based on the subject of your website, you must find high value keywords (ex. A lot of people search by this word or phrase while this word characterizes your site best and if you are lucky it isn’t used by a big number of relevant sites !) .A free tool for find keywords and estimating keyword traffic is Google AdWords.

Titles are also Meta-Information along with meta-description and meta-keywords but it’s the most important of all tags because can actually influence ranking so that’s why I separate them from the group.

a) Title Tags

How To Use them:

• Always try to place your Keywords at the Beginning of the Title tag: Also try these to be your most valuable keywords

• Don’t exceed the number of 65 characters (spaces included) in your title: Because it’s probably going to be given less weight by search engines.

• Unless you are Amazon, keep your site’s name or brand at the end of the title separated with a divider ( -, :, | ): Dividers aren’t playing any role for SEO but help the readability of your page. All end up at the first rule – Keywords left. If nobody knows you so to type your site’s name, they must find out about you by something you wrote, so emphasize on that.

b)Meta Description Tags

Meta description tags are used to describe your page’s content. They aren’t playing any significant role for ranking but they can help readers click on your title by offering a good description of your page or site when appearing in search results.

• Be brief: don’t exceed the number of 160 characters

• Make your description relevant to the title: Don’t try to describe something different from what the user will find after clicking your link.

c) Meta Keywords Tags

Here you can ‘highlight’ your most important keywords. Don’t overdo it. Always try to keep keywords between 10-12 words maximum and don’t try to use the same word over 2 or 3 times, search engines aren’t going to like that.

Example:

<title> Your Title </title>

2. Headings and Customized Content

The h(x) tags indicate your headline’s hierarchy. For example, usually H1 tag is used for your website’s name, H2 for your article’s Title etc. Search Engines like that! Try to ‘show up’ your content’s importance by using headings.

Other things you could use to accent your content are: Bulleted List, Bold , Italic, numbered items etc.

This was a small first part about SEO principles. In the next article we are going to see about the most important thing for SEO: Inbound and internal Links.

June 17, 2014

The Easy Way to Web Design

Simple principles to guide you through ‘harmless’ web design.

The basic, the first and the last rule is:

Keep it Simple!

1.Make clear to your visitors what it’s all about, what’s this web site’s purpose.

Create a ‘simple’, layout with clearly defined areas for your Site’s pages and make sure that there is, for example, a short description near your company’s logo or at the start of your home page that describes the reason of this site’s existence so anyone can understand it. If people can’t understand almost immediately why they are there don’t expect them to stay long or visit your site again.

2.Remove all visual “obstacles”.

Remove anything of little importance that can distract your visitor’s attention, such as tons of banners and ads across the page, along with a couple of image rotators that you added because you thought it was fun. That is a reason, you know, that almost always makes people feel frustrating because of not knowing where to start. Instead try to make clear what a user can ‘click on’ – more specifically try to make all links and buttons of your page obvious to the user.

3.Don’t hesitate to use something that worked in the past.

Your main purpose is to make your website functional and easy-to-use and there are always a couple of known ways to make things happen. These are called ‘standards’ or conventions, things that are already tested and we know they work.

Now, a lot of people may have a great new idea of how a thing could be done differently, and that’s OK, BUT be carefull, because this new ‘bright’ idea of yours may be the end of an initially good project. Before you try to use it, saw your idea to a number of people and check their reactions. After that, base your decision on the people’s reactions, but don’t try to create something new just because you think you have to.A lot of people think that because they are hired to make a website they must bring evolution to the way of websites ‘work’ but they end up destroying the whole project.

Krug Steve, in his book “Don’t Make Me Think – A Common Sense Approach To Web Usability” has a great saying for the use of conventions:

“Sometimes time spent reinventing the wheel results in a revolutionary new rolling device. But sometimes it just amounts to time spent reinventing the wheel.. Innovate when you know you have a better idea (and everyone you show it to says “Wow!”), but take advantage of conventions when you don’t.”

June 7, 2014