Design Department Rules

How do I stop Firefox from opening (restoring) old tabs and windows after a crash?

In the firefox browser type…

You’ll be presented with a warranty warning.

Accept the risk

Scroll down to…

Click on it to change “True” to “False”

How do I stop Firefox from opening old tabs/windows after a crash?
More info here…
Firefox stop opening or restoring windows after a crash or force quit

What is Search Engine Optimisation?

SEO or Search Engine Optimisation is the term used for making efforts to improve your site rank within Search Engines. What’s a websites ‘site rank’? A websites site rank is a score that a search engine decides to give your site based on certain criteria.

  1. Relevancy of search key words and phrases that are contained within your website
  2. Quality of information contained within your website
  3. Quality of your website construction
  4. Popularity of your website based on the number of links found from other websites linking to your website
  5. Media used. Pictures, movies etc.
  6. Compatibility with alternative viewing devices. Smart phones tablets and phablets etc.

NOTE: All search engines are different and will index your site according to their ‘site rank’ rules. But, if you pay attention to the list above you’ll cover most bases and your site will be optimised for search engines.

This score is the order in which your website appears in a list of results for a particular search term. So, the higher the score, the higher up the list you appear.

Top 10 Search Engines

For some time now Google has far outstripped it’s nearest search engine rival’s.

Top 10 search engines by monthly visitors

  1. Google
  2. Bing
  3. Yahoo
  4. Ask
  5. AOL
  6. WOW
  7. Webcrawler
  8. MyWebsearch
  9. Infospace
  10. Duck Duck Go

Further down the list but worth a mention…

General rules for graphic designers providing artwork to a website designer or webmaster.

Graphic designers are often geared to provide artwork for print media. So, what follows is a helpful list of rules to try to follow. By following these you’ll save time and money as the web designer will not have to convert or resize content before the build can truly begin.

Website build rules

  1. Website width:1136px (Height, whatever you like as pages generally scroll to reveal more content. If your aim is to try to fit everything on a page read best website height to use.)
  2. Set resolution at 144pixels/inch (This optimises graphics for use with the current Retina displays)
  3. Use RGB Mode for photoshop
  4. Do NOT define colours as percentages of opacity
  5. Name layers descriptively and as coherently as possible
  6. Choose fonts for your project that you know have a web equivalent. Search web fonts from a provider like then use your equivalent print font to design the project
  7. Save file names as obviously and concisely as possible with no spaces and all lowercase.
    If you wish to put a space between words or characters on a file name then use an underscore or a hyphen to denote this space.


Power user additional guidelines

Supply an associated text file or e-mail with all the following mechanical details.

These would include all the font sizes and line-spacing (leading) used. Define EVERYTHING in pixels not points.

Fonts in HTML are firstly defined with headings. <h1> is the largest heading all the way down to <h6> which is the smallest headline. The smaller headlines are generally used as sub-headings.

Define all colors in hexidecimal AKA Base 16 or Hex (#ffffff etc.)

3 Headline definition examples

  1. <h1>
    font-family: “FranckerW02-ExtraBlack”
    font-size: 70px;
    line-height: 70px;
    color: #33f5aa;
  2. <h2>
    font-family: “FranckerW02-ExtraBlack”
    font-size: 40px;
    line-height: 42px;
    color: #33f5aa;
  3. <h3>
    font-family: “DINLight”
    font-size: 25px;
    line-height: 30px;
    color: #33f5aa;

Then we move on to specifying the body-text or main content copy. This is defined in html by <p> “paragraph”

Paragraph definition examples

  1. <p>
    font-family: Arial;
    font-size: 11px;
    line-height: 15px;
    color: #000000;
    margin-bottom: 20px; (the bottom margin defines the space between paragraphs)

Futher styles of body copy for design purposes i.e. captions, quotes and different sections can be defined using your own definition titles preceded with a period.

  1. .captions
    font-family: Arial;
    font-weight: bold;
    font-size: 9px;
    line-height: 9px;
    color: #cdffaa;
    margin-top: 5px; (how far away the caption is from the bottom of the picture it refers to)
  2. .quotes
    font-family: Arial;
    font-weight: normal;
    font-size: 9px;
    line-height: 9px;
    color: #cdffaa;
    margin-top: 5px; (how far away the caption is from the bottom of the picture it refers to)
  3. .myspecialsection
    font-family: Arial;
    font-weight: normal;
    font-size: 22px;
    line-height: 30px;
    color: #000000;
    margin-top: 5px; (how far away “myspecialsection” is from the preceding paragraph or picture) margin-bottom: 20px; (how far away before the next content element is allowed to start)

Link styles

Finally as part of the text definitions define the link styles.

a:link { color: #0000ff; text-decoration: none; }
a:visited{ color: #00ff00; text-decoration: none; }
a:hover{ color: #cc0000; text-decoration: underline; }
a:active{ color: #ff0000; text-decoration: underline; }

This results in the following link style…
This is the link styled as the above definition

a:link Initially the link text is Blue without an underline

a:visited After the link has been clicked it will be coloured green without an underline

a:hover When you mouse-over the link it will be light shade of red with an underline

a:active When you hold your mouse down on the link it will be a full red colour with an underline


a:visited Is a feature to help people understand that they’ve previously clicked the link and been to that destination. Personally, I and others, find it tricky to use in an elegant fashion within a website build and so tend to give this feature the same settings as the original a:link settings thus returning it to it's original state even if someone’s clicked on it.

a:hoverHelps to denote that this text is an active clickeable link

a:activeVisually confirms that you’ve clicked on the link.


As we’ve defined all the text and link fonts, sizes and colours the last thing to do is to define the background page colour and any coloured boxes and tints used within our design.

Again, we must define these as hexidecimal AKA Base 16 or Hex (#ffffff white to #000000 black etc.)

Background colour: #000000
Page colour: #ffffff
Blue box: #0000ff;
Red box: #ff0000; etc.

Hexidecimal Note

Each RGB colour is defined using two digits as hexidecimal from 0 all the way through to f.

Therefore, black is 00 Red 00 Green and 00 Blue shown as #000000 (No colour in all RGB channels).
White is shown as #ffffff (100% Red 100% Green and 100% Blue)
Red is shown as #ff0000 and Blue as #0000ff
for example a purple colour is defined as #7d5c8e

The number of colors that can be represented by this system is
2563 or 224 =

Investigations into how many colours the human can see vary wildly. But, in real world situations and err’ing on the optimistic side of what the human eye can distinguish this is still 16x as many variations of colour than our eyes can actually differentiate. So, plenty to work with!

HTML e-mail rules

<div style="color: red; font-size: 1.1em">

HTML e-mail animated images

tin can band

For impact and getting your message noticed it’s good to use animation in your HTML e-mails

However, some mail clients like Windows Mail and Outlook only display the first frame of a gif animation so keep this in mind when designing your animated gifs. Try to make the first frame encompass the message you are trying to deliver.

Be aware of file size when creating animated gifs. Keep them simple

NOTE: Outlook 2007, 2010, 2013 and Windows Phone 7 only the first frame of your animated GIF will be shown.

More resources…

HTML e-mail font considerations

You can use custom (non-system) fonts. BUT, this is only currently supported by iOS Mail, Apple Mail, Android and Thunderbird.

You can also specify web fonts for mobile devices.

If it’s designed right you can supply these fonts as the first option then supply web standard fonts as fallback options.

Sure fire system fonts to use in HTML e-mails

The list I’m about to present is taken from my investigations from the wiki page link below on available web system fonts.


Note: From the link above I have removed Webdings from the list as it’s not a Mac supplied font. Andale Mono I’ve removed as it’s not as widely supported as the wiki page seems to suggest.


Arial, Arial Black, Courier New, Times New Roman, Comic Sans, Impact, Georgia, Trebuchet and Verdana

Graphics and Icons

The following graphics are links to Illustrator files that may be adapted to the required size.

Adobe Illustrator. White border around my transparent .gif

If you have a white border around your transparent .png or .gif it’s very probably your Artboard settings in Illustrator. Select the origin of your artboard to start from the top left corner and then make sure your artboard x and y axes are WHOLE NUMBERS and not fractions. This will avoid any white border and give you clean crisp graphics.

Envelope graphic
Envelope graphic
Telephone graphic
Telephone graphic
Instagram graphic
Instagram graphic
Twitter graphic
Twitter graphic
Facebook graphic
Facebook graphic
.PDF logo/icon (regular res)
.pdf logo in 72dpi format
.PDF logo/icon (Retina Ready)
.pdf logo in 72dpi format but twice the physical size needed in this case 148 x 148

Retina ready graphics

Remember to size your finished graphic at 2 times the size it is to appear on screen. i.e. a graphic of dimensions 150px x 150px should be made 300px x 300px and to conform to current conventions the file name should be suffixed @2x.jpg or @2x.gif etc. The graphic saved along side your original version. By using javascript you can target the deployment of the higher res images to retina displays. Load the Retina.js from here to deliver retina graphics to retina devices.

Website online banner advertising considerations for designers

Designers need to understand the implications of File Size before they start designing their online banner advertising. The file size accepted by advertisers varies but a typical size is 50k in file size. This means if you create something 51k or more it will be rejected by the publisher.

Often you can design something that looks very good and has many animations or frames but will end up far exceeding the file size you have been given as your target size.

The fewer the animations** and using flat colours rather than graduating tints or con-tone images will help you stay within your target file size.

Adobe Edge

** Programs like Adobe Edge Animations can produce a javascript file that can handle animations in a way that vastly reduces the end output file size. But the above statement still holds true in that the less animations the better able you are to stay within your target. More animations will mean more graphics and increasing file sizes. The constraint of file size on a Graphic designer can be quite challenging.

Master Template World