How to convert Pixel to Em - Why use ems for font size?

Following on from the last post about calculating beautifully proportioned text sizes, I thought it would be good to cover the "correct" unit of text measurement rather than just sticking with pixels.

The W3C recommends that you use ems for font sizes - why?
The "em" unit is the most scalable when it comes to on-screen display (read more from W3C here)

Basically it gives users the ability to scale up all the font in a web page using their browser settings and see them "grow" proportionally. This is for accessibility reasons.
Generally when you are in the design phase using pixels sizes is easier - so in the end you'll need to convert from pixels to ems.

So how to convert pixels to ems?

Most browsers have a default font size for "medium" text of 16px.
In this case 1em = 16px.
So if you want a font size of 20px you need to divide 20 by 16 which equals 1.25em - easy.

You can use the following widget to calculate em sizes.


Another trick that many web developers use is to scale the overall font size of the body to 62.5%.
CSS: body {font-size: 62.5%}
Why? This converts the overall default font size from 16px down to 10px (16 / 100 x 62.5 = 10). Therefore 1em = 10px and all other em calculations are easy to do in your head (20px = 2em, 12px = 1.2em, OMG so easy!)

WARNING! The only thing to look out for when using ems is nested elements. Using relative sizes (ems) rather than pixels means that the relative size will not override the parent element. It will inherit it from its parent.
For example, imagine a Div (font-size:2em;) with a P (font-size:0.8em;) inside.
The font size of the P inside will actually be 1.6em (2 x 0.8) so when using ems be aware of inheritance from parent elements.

If you're interested in web typography you may like to read about how to choose perfect heading sizes.  Those who are interested in web accessibility should check out the Web Devil post about free web accessibility testing tools.

How to convert Pixel to Em - Why use ems for font size?

How to choose the perfect heading size and text size in web design typography

This is the best thing I've come across for some time - a logical/technical way to pick font sizes in relation to each other. Read on and if you have time, watch the video as Tim Brown gives his explanation (30mins).

Essentially this technique is built around using a harmonious modular scale (using the Golden Ratio or any other "beautiful" scale) and applying it to text size (so simple I can't believe I haven't run into this before!!)

Once you have settled on a suitable type size for the body text you can use the Golden Ratio to find a modular scale of headings and smaller fonts sizes that are visually in proportion, for example:

Golden ratio = 1:1.618

Text size = 16px

16 x 1.618 = 25.888

16 / 1.618 = 9.888

This produces a pixel scale: 41.9, 25.9, 16, 9.9, 6.1

You can also "reverse engineer" an element box width to find the appropriate text/heading size, for example if you have a column of 570px (like this one) then divided by the Golden ratio you get sizes of 51, 32, 19, 12, 7.5

Have a look at my quick mock-up using these sizes (note that 12 pixels is probably too small for standard body text in most websites) -

The Eye Catcher

An Amazing Heading

Title Heading Size

Body text for a 570 pixel width box based on the Golden Ratio. The eye catcher heading is 51px. The amazing heading is 32px. The title heading size is 19px and the base font is 12 pixels with a standard line height of 19px. These have all been rounded to the nearest whole pixel from the modular scale using 570 as the starting point.

Check out this tool that calculates the modular scale for you, it even lets you add another important number into the equation (like if I wanted to include the value of 16px in the above mock-up) modularscale.com

In the video Tim explores the use of these scales and applies it to line height, gutter spacing, even layout and column widths.

As pointed out in the video this is compatible with grid systems, if you're interested read the Web Devil blog about using grid systems for web design and also the post about creating web font stacks and using web fonts - cufon and google web fonts.

How to choose the perfect heading size and text size in web design typography

Comparison of the digital publishing formats .pdf .epub .issue for creating digital magazines

This is a quick review of the three main formats for publishing digital magazines other than our favourite online publishing medium (HTML & CSS).  These formats are primarily designed to be consumed as magazines in an application specific to a device (iPad, Kindle, Galaxy tab, etc.) rather than a web page in a browser.

.pdf format 
The advantage of using pdf is that the design is "locked in" when it is created.  The user has little control and cannot change font, text or format. For designers this is a bonus as their baby can't be mangled by such things as browser version or screen size. However, there is no elastic of liquid layout which can prove a problem given that different devices have different aspect ratios. Users end up moving the document around or zooming in and out to see the whole page.
Interactive pdfs can include buttons, hyperlinks, page transitions, embedded swf and videos (see my link at the bottom on making interactive pdfs)

.epub format
The epub format is used by Kindle, Nook and other e-books.  It is styled like a simple version of XHTML with CSS, and includes interactive table of contents (hyperlinks) and images placed as anchored objects. The disadvantage for designers is that style (size, layout, font, etc) and layout control is based on the capabilities of the end device. This is designed for text (books) rather than magazines that require quality photography (colour!) and typography.

.issue format
The .issue format is a content file that requires a digital content viewer (device specific) to "play" the digital magazine. The .issue file bundles separate horizontal and vertical layouts (think of a tablet as it's flipped from portrait to landscape). It can include page transitions, animation, video, interactivity and is touch interface friendly.  However, it is all too easy to create digital magazines with huge file sizes!! Many apps for digital magazines (Wired mag) are in fact just branded digital content viewers that downloads the latest .issue file.

The current surge in digital publishing is driven by the number of available handheld devices, and the publishing industry trying to generate revenue as print goes into decline.  The open standards web is being ignored to a certain extent as publishers are walling themselves into devices and formats that they can control and extract payments. How will this strategy pan out? Let's wait and see (but don't be surprised when other non-open standard digital magazine formats appear).

Keep tuned to this blog - time permitting I'll write more detail about both the .epub and .issue formats and how to actually make digital magazines. COMMENT on this post about digital magazine formats that you would like to see covered in more depth.

For information on interactive pdfs take a look at the Web Devil tips on how to make interactive pdfs using Adobe InDesign. 

Comparison of the digital publishing formats .pdf .epub .issue for creating digital magazines

Using grid systems for web design, wireframes and layout - 960 grid - 970 grid

Grid systems can be used as guides when designing the layout of a web page. They help with alignment, placement and sizing of elements across the width of the page.
The flexibility of grid systems allows for various permutations of column sizes. In this post I'm going to briefly discuss four basic grid systems - the "traditional" 960 grid system, two 970 grid systems using 12 columns and a 970 grid system derived from the Golden Ratio.

Before we start it's probably worth mentioning that the current trend of desktop/laptop website widths are based on the majority of viewers screen size which at the moment sits at around 1000 pixels (I remember when we designed sites with a max width of 800px). Check out my previous post what is your average viewers screen size  and follow the googlelabs link for the current assessment of the situation.

The 960 grid is based on a page width of 960 pixels that consists of 12 columns. Each column is 80px wide - made up of a content area of 60px with a 10px margin on the left and right. 12 is the magik number as it can be divided by 2, 3, 4 & 6 so there is a great range of potential column widths to choose.

Benefits of the 960 grid is in easy multiplication (3x80 can be done without a calculator at 8:00am before a coffee).
Opponents of the 960 grid point to the margins - two columns each with a 10px margin will generate a 20px gutter (the bit between two columns), too big they say. Also the page edges will only have a 10px margin while the gutter is twice as big at 20px.

The 970 grid - here are two versions that use 12 columns and one that is derived from the Golden Ratio:

• 970 - 70 grid system
• 970 - 68 grid system
• 970 - golden ratio grid

The 970 - 70 grid system has 70 pixel content columns with a left margin of 10 pixels and no right margin - apart from the last column which has a 10px right margin. The benefits are smaller, equal sized gutters and larger content columns.

The 970 - 68 grid system has 68 pixel content columns with the gutter between each column of 14 pixels (there are only 11 gutters). There is no margin on the far left or far right column. The benefits are a grid that has content columns that go right to the edge, but still easily divisible.

The 970 - golden ratio grid does not use the 12 column format.  Instead it is based on the Golden Ratio that uses grid sizes that are "beautifully" in proportion to each other.

The overall width of 970 is subdivided into various columns of 600, 370, 230, 140, 90 & 50 pixels with a proportional padding size of 13 pixels (20px is also a proportional number!).
Although slightly more complex to use, it covers the basic building blocks for column widths however for multiple columns of the same width (eg. you want 4 equal sized columns) then your best choice is one of the above grid systems.

If you want to generate some HTML and CSS with a built in grid system - check out www.gridsystemgenerator.com this is great for fast mock-ups in HTML.

For more detail about designing with grid systems check out the previous web devil post about grid systems for web design.

Using grid systems for web design, wireframes and layout - 960 grid - 970 grid

Create a unique bar code with this barcode generating tool

This is more for print design, but I've found it very useful which is why I've put this bar code generating tool on the Web Devil blog.
All you need to do is enter the number or letter string and it will generate a Code 128 barcode, a Code 93 barcode and a Code 39 barcode.  Nice:)


If you liked this then you'll really want to see my post on making a QR code - a paper based hyperlink!

Create a unique bar code with this barcode generating tool

How to convert points to pixels for web design and layout

If you're a web designer you'll know that you specify sizes in pixels.. and you'll probably know that in print typography sizes are defined in points (traditionally the smallest unit of measurement).  Fonts are measured in points, which is essentially the line height (technically not correct but serves as a quick explanation).
So you may want to find out what a specific point size is in pixels!
This seems like a simple question, but you also need to take into account the physical display size and resolution (pixel density).. arrgh!

Lucky for us this widget does all the hard maths and can convert points to a pixel size for an end device.

If you want to know more about screen resolution and sizes, check out the following posts:

• what-is-your-average-viewers-screen 
• web-design-for-mobile-screen-sizes 
• automatically-detect-screen-size

How to convert points to pixels for web design and layout

How to show email addresses in web pages but hide them from spammers

Here's a typical scenario - you want to put an email address on a contact web page, but you also want to protect it from spammers. The last thing you want is a spammers web crawling program to suck the email address out of your HTML code.

One option is to just not bother putting an email address on the website and use a contact form instead (see my previous post that covers creating a contact form).

The other option is to use a CAPTCHA code like this..

..that can tell if it's a human and only then give out the email.

There are a number of CAPTCHA services available, but reCAPTCHA Mailhide is a free service that automatically generates the HTML code to hide your email and displays a CAPTCHA code. Just one click.. that's all!
Take a look at the following example:

Click here to show my email address

 So to get the full reCAPTCHA Mailhide code just head over to www.google.com/recaptcha/mailhide/

 If you're interested in creating forms then check out these web devil archive posts that cover forms.

How to show email addresses in web pages but hide them from spammers

The complete list of web design tips for beginners

I've got to give a nod to Alexander Dawson for putting together the ultimate 250 web design tips - this is a pretty comprehensive list of the basics - things that beginners need to know but are almost too obvious for anyone who's been around for a while to think about. 
To go to the trouble of putting these down is a great starting point for anyone just getting into web design.  
Check it out over at sixrevisions.com.

If you're a beginner and want to start learing web design, click through the web devil archives on the right, or have a look at the previous post about how to start learning html and css.

The complete list of web design tips for beginners

A quick guide to online marketing

Every wanted a simple timeline to show you what you should be doing to market your website online? Over at ubounce.com they have a great infographic that shows the noobs guide to online marketing.
This hefty graphic steps through the following areas:

• Social media
• Email marketing
• Lead generation
• Organic SEO/SEM
• Conversion rate optimisation
• Analytics
• Content marketing
• Pay per click (ppc)

and covers all the main steps for each of these activities in marketing a website.

If you're interested in online marketing and search engine optimisation, check out all the webdevil posts with the SEO label.

A quick guide to online marketing

How to make an auto height DIV wrap around floating content

When you design web pages with CSS sooner or later you'll run into this problem - you've got a nice auto height div container with some floating elements inside BUT the auto container doesn't expand  to wrap around those floating elements inside!
Example:

<div id="wrapper"><!-- auto height -->

  <div id="col1"></div><!-- floating -->

  <div id="col2"></div><!-- floating -->

</div>

There are three basic solutions (don't switch channels before you see the third one - it's a cool tip!!)

Solution 1. Stick some text in a paragraph after the last floating element. Some people use a blank paragraph <p> &nbsp; </p>  Not a pretty option, or semantically good.

Solution 2. Add another element with a clear float after the last floating element. Another div tag, or even a break.

<br class="clearboth" />

CSS:

.clearboth {clear:both;}

This works and is the most common method used.

Solution 3. Clear the float using overflow: auto on the last floated element.
CSS:

#col2 {overflow:auto}

check this last solution out in more detail over at webdesignerwall.com - they have a good demo and include how to word wrap using this method.

If you want to know more about floating then check out my previous post about working out how CSS float works.  
Also check out the solution to IE 6 making your float margins twice as big!!

How to make an auto height DIV wrap around floating content

Check SEO statistics on any website for free!

What if you could get SEO statistics about any website on the net for free?

Having stats about your own website is easy to get your hands on, but getting the low down on your competitors is another thing altogether - check out the blekko search engine.

You'll find that by every search result there is an seo link (see the following screen shot)

...click the link and you get some fancy graphs about inbound links (yeah!) outbound links, internal links and duplicate content.

And as well as seo you can do lots of other funky stuff with blekko - the slashtag might be too much for your average web surfer to learn, but it allows for quick filtering of results. Check out the following video:




If you want more SEO info, then check out my previous post about how pagerank isn't everything and how to get a detailed report about your website.

Check SEO statistics on any website for free!

Accessible websites for dyslexic users

A great article over at uxmovement.com looks into how text design can cause visual distortion to dyslexic users.
I did a quick search that reveals dyslexia affects between 5 and 10% of the population - so so changing your design to assist upto 10% of your viewers is a good idea.
I've summarised the article into the follow graphics that give an overview of the design decisions that produce visual distortion.
For more details visit the original article and follow their sources.

The River Effect:

The Blur Effect:

The Washout Effect:

If you're interested in Accessible web design - read my previous post about online accessibility testing tools.

Accessible websites for dyslexic users

Web design for mobile screen sizes

To follow up on the last post about mobile web design, here is a great link to design considerations related to the size of mobile phone display resolutions over at uxbooth.com

I really like the compiled list of resolutions to devices, which I've summarised into the following graphic (note that this is by no means a complete list) - click to enlarge at 100% pixel size.

The article also has a good introduction to CSS3 media queries.
The best bit of this post at uxbooth.com is the comments section - have a look at the comments about the iPhone 4 display resolution.
You'll notice on my graphic that the iPhone 4 (grey box) has the "biggest" display, however in reality this is the same as the previous iPhone (orange box) but with a higher dpi. The discussion in the comments section covers this in more depth (and how it effects web graphics).

Now you know about different screen sizes, you really need to know about viewports and how viewports relate to screen size and the all important viewport meta tag.

Web design for mobile screen sizes

How to make an HTML link to call a phone href=tel:

With the rise in mobile web surfing the benefits of calling direct from a web page become more realistic (see my later comments regarding Skype and international users).
This is easy to implement as the URL spec allows for telephone numbers which all the latest mobile browsers can use.
Here it is:
<a href="tel:5551234567">Call (555)123-4567</a>
One click should open the phone dialler and input the number to be called.
Example:
Call (555)123-4567

Too easy! Well, yes there are a few concerns...

What happens if you see this page on a desktop computer?  You click the link and nothing happens (which is why I've included the number in the link text).
Well you could hide this link using CSS in the following way:

<a class="mobilesOnly" href="tel:5551234567">Call (555)123-4567</a>
CSS for non-handheld devices
.mobilesOnly {visibility:hidden;}

Another problem is that on desktop computers Skype is a big player, and they use the non-standard spec of callto as follows:

<a href="callto:5551234567">Call (555)123-4567</a>

so now we have the battle between callto for Skype and tel for mobiles.

Another thing to look out for is that this will only really work for local websites.  So for a website with a global reach, the usefulness of a telephone number on the page is limited (think of all those different international dialling codes), but for a local store the benefits are massive.

And my last concern is unscrupulous marketers harvesting phone numbers (especially mobile numbers) in the same way as email addresses to spam people with SMS ads.. but that's something to look out for just round the corner.

If you're interested in optimising your sites for mobiles then look at my previous post about having multiple versions of the same site  and design trends for 2011 which are driven by mobile devices.

How to make an HTML link to call a phone href=tel:

Web design contracts and legal guidelines for freelancers

Ever had "scope creep" or a client who delays payment?  If you're working as a freelancer or run you own business it makes sense to know the legal side of things.

Here are a number of great articles about this issue.
At webdesignlegder.com there's a short summary of what you should be doing:

• drafting contracts
• setting dates
• adding follow-up clauses
• defining project deliverables

Over at sitepoint.com  there is a more detailed look at producing web design contracts and at zenfulcreations.com a template for a basic web site design contract which is a great starting point to get you going.

Want to know how bad clients can be?  Check out my previous post about web design and client relations.

Web design contracts and legal guidelines for freelancers

Adding a search box to your website

There are three main ways you can add a search to your web site:

1. If your site uses a CMS then it may have a search module that is easy to install (some popular ones listed below):

• Drupal search module
• Wordpress search plugin
• Blogger search form

2. You can use the power of Google to search you site using the Google custom search (you need to have a google account to generate the code):

• Google custom search

3. Trick google into only searching within your site using a hidden search field containing your website URL - check out my previous post with the code:

• how-to-add-site-search-to-your-web-page

 - quick and easy!
You may also like to add the new HTML5 search form tag while you are at it - check out my previous post about HTML5 forms that you can start using right now!

Adding a search box to your website

Who has a slice of the browser pie?

Following on from an earlier post this year about web viewing stats for 2010, here is a graphic I put together showing "Who has a slice of the browser pie?" - global web browser trends going back to January 2008.
Interesting to see how IE has steadily been whittled away and how Google Chrome and Apple Safari are on the rise!
The data is sourced from w3counter.com, which has a great trending graph.

Click to enlarge the graphic:

Who has a slice of the browser pie?

Basic Design Principles for Web Design

The general design of a webpage can be summarised in the basic principles of web design.
A great article over at psd.tutsplus.com  gives 9 general principles for good web design - these can be summarised into the following points (read the article for more in depth coverage of each):

1. Precedence (guiding the eye)
• Position
• Colour
• Contrast
• Size
• Design Elements
2. Spacing
• Line spacing
• Padding
• White space
3. Navigation
• Where can you go?
• Where are you now?
4. Design to Build
• Can it be done
• What happens when a screen resizes?
• Can you simplify things?
5. Typography
• Font choices & size
• Spacing
• Line length
• Colour
• Paragraphs
6. Usability
• Standards
• What will users do?
• User tasks
7. Alignment
• Grid systems
8. Clarity
• Sharpness
• Edges snapped to pixels
• Contrast
9. Consistency

Another great resource about design with respect to white space is over at alistapart.com

 and has some good example graphics.

For more specific details have a look at the previous post about the essential elements in a website-landing page.

Basic Design Principles for Web Design

Free Online web accessibility testing tools

Web Accessibility means that people with disabilities can perceive, understand, and interact with a website, no matter whether they have  a visual, auditory, physical, speech, cognitive, or neurological disability.
Making a web site accessible can be simple or complex, depending on many factors such as the type of content, the size and complexity of the site.
Ideally you want your site to be accessible by the greatest number of people you can - including older people who may have age related accessibility issues.
So how do you check that your website is accessible? 
Obviously testing is a crucial step - but you may not be an accessibility expert, which is why there are a number of free online resources that check basic accessibility functions:

• The first is wave - this provides a report on any URL you feed into it.  Even more useful is the wave firefox toolbar (works great in tandem with firebug).
• Secondly there is cynthiasays, which provides a similar report to Wave for a web page URL you specify.

For more details on accessibility and HTML have a look at the links in the following post
how-to-start-learning-html-and-css and look at the Accessibility tutorials.

Free Online web accessibility testing tools

How to add Facebook comments to your own website!

Facebook have just added a new plugin that will allow facebook commenting on your site!
It's easier than you think - just 4 easy steps:

Step 1. go to developers.facebook.com/docs/reference/plugins/comments/ and choose the options that you want for your new comment section.

Step 2. You will be prompted to login to facebook to get an application ID that is specific to that page URL.

Step 3. Once you get to the page where it generates the APP ID you can go back to the comment generator and do it again - it will give you the HTML code with your new ID embedded.

Step 4. Cut and paste the HTML code into the correct portion of your site.

That's it!

There are also instructions about moderation of comments
This is a link to the moderators comment tool developers.facebook.com/tools/comments.
- and facebook is touting the fact that all of its users are genuine so you won't get as much spam and crud in your comments (because the comment appear on the users facebook page :)

Check out what this looks like by going to my new facebook comments section on my homepage - tobyonline.co.uk

This follows hot on the heels from my very recent post of retrofitting comments to your website using Disqus ...now your have another options - cool.

How to add Facebook comments to your own website!

Is it good to have multiple versions of the same website?

Following on from my recent post about automatically detecting screen size let's look at why you may want multiple versions of a website, and if this is a good idea.

Firstly, why would you want multiple versions?
- Well the short answer would be to accommodate the variation in screen sizes and platforms (phones, web tv, tablets etc.)  Many sites already have a main site and a mobile site (example www.bbc.co.uk/mobile/).

Therefore, why not build a new domain or sub folder for each platform and even make a flash and non-flash version?
- This is one way of tackling the problem, and for a small site is possible, but there are a number of problems you may run into:

1. maintenance - keeping content updated, correct and relevant on multiple sites is going to be more work
2. link sharing - what if someone on a mobile shares a link to a page that you're viewing on your desktop, not the best user experience for you

There is a more in-depth article about the dangers of multiple websites here, where Michael Gray suggests the following:

• Use a single domain to serve all of your content
• Use a single URL on that domain to serve content, for every platform and user agent
• Use style sheets or server side scripting to serve content optimized or properly formatted for different platforms
• Use country specific tld’s or subdomains only for different countries or languages

Good summary - which leads to my previous post of web design trends for the coming year.

Is it good to have multiple versions of the same website?