< ADD A SPLASH OF COLOUR

Post image for Email 101 – Part 2

Email 101 – Part 2

by AdamHuxtable on September 23, 2011

Every week the Splash Digital team will be blogging their Email Tips and Tricks to share with the world. Because they love emails, I mean really, really love emails!

Last week Adam picked 4 of his best CSS fixes he has in his toolbox, this week he’s back with Digital Designer Nathan, with 4 more fixes. This time white space management and character encoding are in their sights.

1. The shim gif

Campaign Monitor advises against the use of these spacer images with the reasoning that most clients have image blocking on as standard. Interestingly Mail Chimp advises for using them, and Sitepoint has no mention of the little blighters! From our own experience here at Splash we highly recommend using these one pixel transparent GIFs and we think they are one of the most important tools within an e-mail developers arsenal. Whilst it is true that most email clients have image blocking on as default, we can’t see what the problem is having a fixed transparent gif there if you can’t see it anyway (you can read Campaign Monitors own design guidelines here, we thoroughly encourage it!). Having said that, we also urge you to back up your fixed dimension shim.gif by placing it within a fixed width <td>, for ‘just in case’ scenarios. This double combo we have tested and now have no issues in the spacing department.

Another advantage of the spacer image is fixing your height. For example, say you are having issues with line-height making your fluid email layout too small. By adding a fixed height shim.gif your text may shrink but your design will stay at your desired height.

For any padding, spacing or alignment this is the most reliable and robust way of making sure the email holds together as expected.

Hard spacers of <p> and <br /> are fine in some clients but are also pretty fluid in others resulting in an exploding layout.

2. Character encoding

Ever received an email in your inbox and it has random characters popping up such as ‘â’ or ‘•’? This is due to special characters like ‘&’, ‘*’ and ‘%’ not being encoded correctly. Whereas some email distribution and marketing companies do recognize these characters as being different and encode them automatically, some ignore them. So to be on the safe side encode your specials correctly.

Use this table and bookmark the site, it can save you a lot of embarrassment: http://www.ascii.cl/htmlcodes.htm

3. Nest dem’ Tables

Nesting, together with spacer images (see shim.gif point), are a more reliable method of positioning than adding padding and adjusting the margin. The standard amount of nested tables tends towards 15 deep before your design starts to look a bit funky (with the exception of those Adonis’ of email clients Lotus Notes 6.5 and 7, which nest only up to 8).

Be careful, even though this has been tried and tested by CM and ourselves, we have heard Urban Legends of email designs being hacked apart after 10 deep tables. As with anything in email development make sure you do your own testing with reliable software and archive those screenshots. If in doubt test, test and test again!

4. Spanning the ages

Nesting tables leads neatly on to our next subject of ‘colspans’ and ‘rowspans’ There is always a debate about something in the email design/development community, and colspans are one of them. Our advice: don’t use them. They cause more hassle than they’re worth and Outlook 2007 doesn’t recognize them (because its HTML rendering engine uses Word 2007. Talk about one step forwards two steps back!).

Again nested tables are your saviour here, reliable, robust and, above all, supported!

Thanks for reading!

@adamhuxtable

@nathan_nowinHD

{ 0 comments }

Post image for Email 101 – Part 1

Email 101 – Part 1

by AdamHuxtable on September 2, 2011

Every week the Splash Digital team will be blogging their Email Tips and Tricks to share with the world. Because they love emails, I mean really, really love emails!

This week Email Designer and Developer, Adam picks his 4 best CSS fixes for pain-free, and beautiful email builds:

If you’re here because like me you believe that building emails is like trying to assemble the world’s biggest jigsaw puzzle, well never fear us at Splash Digital are here to help! Having been a part of a team that builds E-mails for a living we’ve collaborated in creating a small list of tips and tweaks that will hope help your email build be pain free.

CSS is the key to make your emails stand out from the rest. Simple. Just because your coding like it’s 1999 doesn’t mean it has to look like its 1999, don’t be afraid to get creative! However, just dumping CSS in your code is potentially a minefield of rogue colours and erroneous underlines. Carefully positioned code, rigorous testing and taking note of a few of these pointers will help you on your way.

1. E-mail clients vs CSS

Majority of email clients strip the CSS within the document out, however if you do need to have CSS within the email then place it within the head of the html.

A:link {text-decoration: none; color:#01243e;}
A:visited {text-decoration: none; color:#01243e;}
A:active {text-decoration: none; color:#01243e;}
A:hover {text-decoration: underline; color:#01243e;}

‘Cover all bases’ should be at the top of any email mantra and this CSS fix definitely fulfils that!

2. Link styling

Ahhhh the wonderful #0000FF hyperlink, this can stand out like a sore thumb if it doesn’t fit in with the colour scheme in the email. So lets correct these nice looking Blue Links

To fix this all you need to do is wrap the href tag around the outside of the span and contain style=”colour:#000000;” full example below.

<a style="color: #ff00ff;" href="http://somesite.com/">
<span style="color: #ff00ff;">this is a link</span>
</a>

3. Mail chimp fix

These are not necessary created by Mail Chimp but it is a source that I and many email developers use as a research tool. I have only recently come across these client specific fixes, all three are very useful. The last fix (text-size-adjust) I have been using awhile due to the increasing volume of emails being viewed in mobile browsers. Simply slot these lines of code within the CSS contained in the header mentioned earlier and away you go.

/* Client-specific Styles */

/* Force Outlook to provide a "view in browser" button. */
#outlook a{padding:0;}

/* Force Hotmail to display emails at full width */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;}

/* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */
body{-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}

4. CSS reset

CSS reset is not new to me as I come from a web design background where they are used regularly, however I never thought of adding one to emails due to the CSS restrictions from clients (they tend to strip a lot off CSS out). But, I came across a HTML email boilerplate and low and behold it had one in place! For the laymen a CSS reset essentially does exactly what it says on the tin by resetting all the CSS in the browser first before it loads your styles. This is handy because some (most!) clients will add in their own styling that will overwrite yours and this handy bit of code will wipe the slate clean before it adds your beautiful CSS. Once again this will sit within the CSS style type within the header of your HTML document. It may look daunting, but give it a test!

<!--

/* Client-specific Styles */

/* Force Outlook to provide a "view in browser" button. */
#outlook a { padding: 0; }

body { width: 100% !important; } .ReadMsgBody { width: 100%; } .ExternalClass { width: 100%; } /* Force Hotmail to display emails at full width */
body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; } /* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */

/* Reset Styles */
body { margin: 0; padding: 0; }
img { height: auto; line-height: 100%; outline: none; text-decoration: none; }
a img { border:none; }
#backgroundTable { margin: 0; padding: 0; width: 100% !important; }

p {
   margin: 1em 0;
}

h1, h2, h3, h4, h5, h6 {
   color: black !important;
   line-height: 100% !important;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   color: blue !important;
}

h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {
   color: red !important; /* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */
}

h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
   color: purple !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
}

table td {
   border-collapse: collapse;
}

.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important; } /* Body text color for the New Yahoo.  This example sets the font of Yahoo's Shortcuts to black. */

-->

To get hold of the latest version of HTML Email Boilerplate —> Go Here

@adamhuxtable

@nathan_nowinHD

{ 0 comments }

Ampersand Web Typography

Ampersand Web Type Conference

by Nathan Langley on July 12, 2011

17th June. It was a day of hardcore weather to be in Brighton, a day when I had a complete failure of iOS and the day of the First conference on Web Typography in the world let alone the UK. The failures of the iOS are relevant because I lost half my (not so) Evernote’s and have to rely of hastily scribbled glyphs written in the gloom of the Brighton Dome Corn Exchange.

The web is going through something of a upheaval, spear headed by change in attitudes towards layout as viewports grow smaller and varied, and as a result a rethink of how legibility is becoming increasingly important with tech savvy consumers. In 2007 Håkon Wium Lie, Chief Technology Officer at Opera, announced that the Opera browser will start supporting the @font-face rule, thus starting a review of how designers look at fonts on the web, and opening up a plethora of new and exciting font faces for us to play with.

Fast forward to the stormy day in June and we have pretty much hit the ground running at Ampersand, straight into Vincent Connare the now (in)famous creator of the font designers love to hate. His talk was a yarn of old stories from freshman years at a young Internet Explorer and the steps he made in creating the font-that-will-not-be-named from reading the Watchmen amongst other comics of the time.

Having Connare opening the event is testament to the conferences organisers their attention to detail, and passion for a fledgling medium. Vincent explained that fonts should be used in context and purposefully. He presented example slides of Comic Sans (Noo!) in a number of uses both relevant and downright bizarre. The former being signage for the 99p store and the latter instructions for an emergency defibrillator!

Leading on neatly from Vincent’s annotations on font context was Jason Santa Maria on the intricacies on selecting the right font for the right job and understanding that good typography is invisible to the user. This lead me to recall the well worn web design phrase ‘Don’t make me think!’. As designers we should be creating experiences (shudder) that don’t force the user to ask questions or figure out a puzzle, but guide them along making every action enjoyable (‘Don’t expect people to decode’ – Jon Tan), Selecting the right font is part of this process. Jason mentioned that type has a ‘dual life’ of readability and aesthetic. A user doesn’t care what the rationale was behind choosing Futura PT for your design was. They are more likely to skim read and fixate on certain areas of the sentence anyway. It’s not about ‘can I read it’ more ‘do I want to read it’.

Jon Tan (@jontangerine) then got philosophical by throwing Seth Godins lizard brain (or Amygdala) theory into the mix. This is prehistoric emotional trigger that gives every object an expressive response to everything. In reference to Jason Santa Maria beforehand, Jon stated that the typeface chosen is seen and felt before the content is read, ‘Don’t think, Feel’, he said, quoting Bruce Lee. He then showed some incredible work Reid Miles did for the Blue Note record label, truly timeless and inspiring stuff.

The opening of the conference really drove home the emotional connection point, which I believe is too easily overlooked. Just because a typeface looks nice on a page doesn’t necessarily mean that it’s being used in the best context when it comes to web. This of course transcends all communicative media, but it seems that only now is it being taken seriously for our medium.

Next up was Jonathan Hoefler of Hoefler & Frere-Jones, my first experience of listening to a typographer ‘proper’ and the first ‘whooping’ of the day. Jonathan announced that Hoefler & Frere-Jones were releasing almost 100% of their font catalogue as web fonts; needless to say the crowd went wild, well as much as a bunch of Web Designers and Typographers can! What really struck a chord with me personally was the insight of how much work goes into creating a font. H&F’s latest font, Ideal Sans (which is lovely by the way),  was started nearly 10 years ago and was only finished the Tuesday before the conference! He also expressed strikingly the pain staking process of rendering an insane amount of new glyphs for each of their font-families to make sure that they work perfectly across the web.

The impression you get from Vincent Connare, and subsequent speakers, at the beginning of the day was that a lot of the fonts they were producing in early operating systems were badly rendered versions of print fonts. And even a n00b like me quickly caught on that this system would sooner or later end in designer tears. Technical limitations of browsers, operating systems and, increasingly, devices all display fonts differently; often the difference is only slight. For great example of how fonts behave in this situation head over to the Typekit site and play around with one of their fonts using a handy little browser-sampling tool.  Granted all of Typekits fonts are web-ready anyway, but you’ll get the idea. In his talk after lunch David Berlow also highlighted this as an issue that effected decisions the early days of his career when making fonts look legible from screen to printer.

My Creative Director here at Splash Worldwide first got me onto Tim Browns method of the modular scale for laying out designs and I have to admit somehow it works! To summarise: “A modular scale is a sequence of numbers that relate to one another in a meaningful way”. By using this method (amongst a selection of others he outlines) the spacing and sizing in your designs all of a sudden have a context. It was even better hearing it from the guy himself. He also reinforced a niggling suspicion I have that web designers are essentially just trying things out and seeing what sticks rather than having a set solid rules to work by. I managed to collar him at the end of the day and talk further about this methodology and generally what it means to be a designer in this industry. His underlying message was ‘I don’t know if this is right or not but, hey, it feels good!’ And why not too! How else are we going to grow this industry if we don’t take chances? I hear you cry ‘My body text is 12 point and my headers go up in increments of 2, what’s wrong with that?’ well, nothing really, but essentially it’s just a arbitrary number. So what’s wrong with having a methodology behind your sequencing? Give it a try and I’m sure it will get you thinking in your next design!

The last talk of the day was refreshingly up beat and light after the intensity (for me anyway!) of John Daggett, from Firefox, discussing the advances they are making in browsers for CSS3 web fonts (for more information check out http://www.w3.org/TR/css3-fonts/). Mark Boulton bounded through a generally forward thinking presentation of theories and ideas about the progression of web design in regards to layout and the limitations of the canvas. He motions for us designers to think more around content and design out from that, rather than design and then crowbar the content in (we’re all guilty of it! No? Well, some of us then). But unfortunately his ‘Designing for Chaos’ theory threw up more questions than answers, not a bad thing by any stretch. He says ‘If you don’t know your content, go to the pub!’. Fair enough, but I’ve worked on plenty of clients where we’ve been asked for ‘a look and feel’ design and then the content gets thrown in at the eleventh hour, in some cases, at the detriment of the design. After I fretfully tweeted this after the conference, Mark was good enough to respond with ‘It’s the norm unfortunately. Lots of education, process change and pain awaits.’ And there’s the key word ‘education’, the principal challenge that faces this industry. I have a lot of respect for Mark Boultons theory and I have a feeling it will be one that will take time, but will eventually be common practice in web design circles. I will certainly be following it closely.

Ampersand made me a Typophile. I still feel like the novice compared to most of the attendees, but I now seem to see fonts everywhere and in every context. It’s annoying for my colleagues and friends when every time type comes up in conversation my two pence gets clumsily wedged into it. The day was an inspiring and exciting trip through fonts and type, and is a good reflection of the state of the industry at the moment. I look forward to its return with a new found fervour.

To sum up I’ll leave that to Jason Santa Maria “This is a fantastic time to be a designer, because someone has opened the door again”.

 

Special thanks specifically to Richard Rutter, who brought the whole thing together tremendously.

Recommended reading and viewing:

Typekit’s blog: http://blog.typekit.com/

Lost World Fairs: http://lostworldsfairs.com/

Fonts in Use: http://fontsinuse.com/

Nice web type: http://nicewebtype.com/

{ 0 comments }

Visualizing our humanity

by John Beach on May 25, 2011

Artist Aaron Koblin takes vast amounts of data — and at times vast numbers of people — and weaves them into stunning visualizations. From elegant lines tracing airline flights to landscapes of cell phone data, from a Johnny Cash video assembled from crowd-sourced drawings to the “Wilderness Downtown” video that customizes for the user, his works brilliantly explore how modern technology can make us more human.

{ 0 comments }

This ad, has become a YouTube sensation with 37 million hits, featuring a pint-sized Darth Vader trying to use the force to move various objects.

Having featured in a trial spot in Hyde Park last Friday on screens erected for spectators watching the Royal Wedding, the spot will air on TV screens today and run for six weeks. The ad has not been modified for a UK audience.

{ 0 comments }

This stuff just never gets boring!! Great use of 3D Projection mapping to launch the new H&M store in Amsterdam.

{ 0 comments }

A next-generation digital book

by John Beach on May 3, 2011

Software developer Mike Matas demos the first full-length interactive book for the iPad — with clever, swipeable video and graphics and some very cool data visualizations to play with.

{ 0 comments }

What do friendships look like?

by John Beach on April 20, 2011

When I first saw the stunning Facebook visual I thought wow, what a cool map. Then it hit me that there is no map sitting in the background – the countries you can see are built by visualising friendships.

It was made by Paul Butler, an intern on Facebook’s data infrastructure engineering team. Go have a read – a bit techy but well worth it. Read more here.

{ 0 comments }

Malcolm Gladwell on spaghetti sauce

by John Beach on April 18, 2011

This has got to be one of the most inspirational things I have ever seen.

{ 0 comments }

Tripping the light fantastic

by John Beach on April 18, 2011

This is the footbridge over the River Tees with lighting designed by Speirs & Major. I love how the LED lights respond to the presence of people, guiding them over the bridge and signaling the presence of oncomers. When people cross the bridge, handrail sensors trigger a change from blue to white, leaving a trail of light in the pedestrians’ wake. Pretty cool!

{ 0 comments }