Design Department Rules
How do I stop Firefox from opening (restoring) old tabs and windows after a crash?
In the firefox browser type…
about:config
You’ll be presented with a warranty warning.
Accept the risk
Scroll down to…
browser.sessionstore.resume_from_crash
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.
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 http://www.ebizmba.com/articles/search-engines
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
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
Then we move on to specifying the body-text or main content copy. This is defined in html by <p> “paragraph”
Paragraph definition examples
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.
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 |
DESIGN NOTE
| 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:hover | Helps to denote that this text is an active clickeable link |
| a:active | Visually confirms that you’ve clicked on the link. |
AND FINALLY THE PAGE COLOURS AND BACKGROUND TINTS TO BOXES
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.
0123456789abcdef
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 =
16,777,216.
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
- Don’t use embedded objects or scripts. They almost certainly won’t work, and are likely to be flagged by spam filters.
- Don’t use frames or forms. Very few clients support them.
- Don’t use a background image with text on it if that text is going to be coded. (It’s OK if it is going to remain an image)
- Don’t use a single image for the entire email’s content. It is inefficient and likely to be marked as Spam and never seen.
- Don’t use external images. Many clients will not download them. Instead, the images should be embedded in the email. The majority of HTML e-mail marketing software i.e. Campaign Monitor, will do this for you. On the HTML Body/Options branch, set the Image Locality field to “Internal”.
- Don’t use style sheets. External style sheets almost certainly won’t work. Internal style sheets will not work on many web-based clients, including Gmail. In fact, you should be aware that many clients ignore everything before the <body> tag. Instead, you will have to rely on inline styles, like this:
<div style="color: red; font-size: 1.1em">
HTML e-mail animated images
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…
- http://code.tutsplus.com/tutorials/20-email-design-best-practices-and-resources-for-beginners--net-7309
- http://www.gammadyne.com/html_email.htm
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
- Verdana
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
Telephone graphic
Instagram graphic
Twitter graphic
Facebook graphic
.PDF logo/icon (regular res)
.PDF logo/icon (Retina Ready)
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.
Contact
