iPhone 6? Nothing to see here...

It's bad news for lovers of cold sweats and palpitations I'm afraid. The launch of the brand spanking new iPhone 6 and iPhone 6 Plus devices may well have some people whimpering into their keyboards but round here it's business as usual.

In a break from tradition Apple have introduced 2 new screen sizes and a new rendering method for the iPhone 6 Plus, which both scales up and downsamples the content it displays. If this sounds like it might give you a headache, fear not! The design team at NewZapp have coded responsive templates from the outset to cover all bases and these comfortably encompass the parameters of the new devices, meaning everything still looks perfect whichever device you use.

In a nutshell? Your emails already look great on the new iPhone. Carry on.

Essential responsive email code: fluid table widths

We're back again with some more HTML and CSS code goodies straight from the NewZapp email designers' ever-so-trendy dispatch-style satchel. This time we deal with an email's very skeleton, the elements truly critical to any HTML email layout: tables.

No sniggering at the back please, web designers.

So, on wider screens these have nice and stable fixed widths, all perfectly normal. But once opened on any the plethora of mobile devices that come with sadly much narrower screens, these same tables must be made to transform and flow sinuously down their slimline LCD visages.

How is it done, pray tell? Wonder no more as we present to you ...

... fabulously fluid table widths.


Essential responsive email code: fluid table widths

A brief note about how CSS styles are declared here

Although this code will have been inserted into a Media query in order to limit its effects to narrower screens only (see this article) some upstart email readers (*koff* Yahoo! *koff*) will still ignore this and attempt to render all of the CSS regardless. This generally produces an email layout most displeasing to the eye ...

There is, happily, a neat workaround. It turns out that using the attribute selector method of creating a  class or id is ignored by those very email readers, yet still recognised by all the mobile devices that need to use the styles they contain. Happy days!

You will also notice the use of a tilde '~' (otherwise known as a squiggly', can't think why) alongside the normal equals '=' symbol. This effectively means 'containing' - that is, the CSS looks for any of the specified elements that contain that particular class.

The upshot is you are able to use multiple classes on each element in the email rather than being restricted to one, e.g.
<td class="rspnsv-tbl scale-me text-to-14px" > ... </td>


And why the !important declaration?

This has been found to be useful in overriding any proprietary stylesheet rules that email readers may try to impose upon your beautiful code. And they will, make no mistake ...

Can't get enough wisdom? Why not peruse the companion blogs in this series:


 The magical Media query

Fiendishly fluid content alignment

Undeniably useful element modifiers


Apple and the iPhone 6 – what’s all the fuss about?

Every year it happens: Apple introduces a new iPhone, and, like salmon returning to the river, throngs of faithful fans start forming lines outside Apple stores. Today saw the release of the iPhone 6 (4.7 inches) and iPhone 6 Plus (5.5 inches) which according to Apple, it isn’t just bigger – it’s better in every way.

I’ve spent a lot of time wondering about Apple fans and their penchant for line waiting. You can easily order yourself the latest phone online or visit any one of the hundred other stores that sell iPhones, but no, the Apple hard-outs queue for hours, even days so they can be the first to get their hands on a shiny new Apple toy.

(Apple fans queuing at 7.30am outside the Exeter Apple store on release day. 19.09.14)

I’ve since come to the realisation that it isn't about the gadget. No, it’s about the brand. Apple’s brand is so powerful, and so compelling, that people want to attach themselves to it, or attach the brand to themselves. They want people to see them standing outside the Apple store. They want to be identified with Apple, and what Apple represents. 

The demand for this latest release has beaten all previous records with more than four million units sold as pre-orders in the first 24 hours of going live, double the number for the iPhone 5 when it first went on sale to pre-order. In fact, the number of orders appears to have caught the technology giant off-guard, as the firm stated that some devices might not reach customers until next month.

In terms of the phone itself, Apple has overhauled the squared off design which has been with us since the iPhone 4, with the iPhone 6 sporting a more rounded, slimmer body. In fact, the 6 is just 6.9mm thin, making it one of the slimmest smartphones on the market. It's slightly heavier than the 5S at 129g, while the body measures 138.1mm x 67mm.


The power/lock key has been moved from the top of the handset to the right hand side, making it easier to hit during one handed use. On the left hand side you get the separated volume keys below a mute toggle switch.

Apple hasn't revealed the exact battery size but it claims that the iPhone 6 can keep going for up to 250 hours on standby, 12 hours of talk time, 11 hours of internet use or 50 hours of audio playback, which sounds like a modest upgrade over the iPhone 5S.

Running Apple's latest platform offering, iOS 8, it does add some useful new features and improvements. For example it includes third-party keyboard support, improved OS X integration, more interactive notifications, a new Health app and the ability for third-party apps to use Touch ID.

To find out more about the iPhone 6 click here

With Apple’s latest release and the constant stream of bigger (or smaller in some cases) and better smartphones entering the market from rival brands, all capable of sending and receiving emails on the go, it’s now more important than ever that your email marketing campaigns look good on mobile. In fact, according to Litmus, 51% of email opens are now on a mobile device, and some brands see upwards of 70% of their emails opened on a mobile, while 80% of people will delete an email if it doesn't look good on their phone. Begs the question, how good does your email look on the new iPhone 6? 

Essential responsive email code: the Media query

Straight from our multi-coloured corner of the office, we of the Design team at NewZapp are keen to share some titbits of HTML and CSS that we have so far been keeping safely in our burrows. This is actual code that can be used to create your very own responsive emails!

And you can rest assured dear people, for this is the very same code that is used day-to-day by our good selves to craft the multitude of bespoke email templates sent forth from NewZapp acres to brighten the world. As such, they have been been rigorously tested to display correctly in all of the most popular email readers and devices.

Without further ado, first up for your delectation ...

... the magical Media query.


Essential responsive email code: the Media query

A brief note about @media declaration and nested curly braces

Using a media query in your stylesheet means that you will likely be nesting multiple sets of curly-braced style declarations within another.

Do not be alarmed. This is all fine - in fact, if you're using an HTML editor such as Adobe Dreamweaver, you will probably find the @media{ ... } declaration will be given it's own colour anyway to distinguish it from the usual class and id declarations e.g.
<style>

  table td {width:600px;} //CSS as usual
 
  @media screen and (max-device-width: 479px), screen and (max-width: 479px)
  {
    table td {width:100%;} //woo! nested curly braces
  }

</style>
Splendid stuff!

Want more? Then step this way for our other blogs in this series:


 Fabulously fluid table widths

Fiendishly fluid content alignment

Undeniably useful element modifiers


How not to annoy your subscribers with your email campaigns

No doubt you don’t intentionally set out to annoy your subscribers with your emails, however, it is possible to unwittingly partake in marketing behaviours that can undermine your credibility with your subscribers causing your email campaigns to be branded as “annoying”.

Here are a few tips to make sure that doesn't happen to you.

Only email people who have given you their permission
Surprisingly, many email marketers still send to purchased lists which is a sure fire way to get reported as spam, which can also hurt your future deliverability. Contacts from a purchased list have never heard of your company, and most of them will be confused and annoyed that they are suddenly receiving updates about products and services they’re not interested in or signed up for.

Avoid sending only promotional emails
Unless someone indicates they are ready to buy (maybe they signed up for a trial or asked to be contacted by a sales rep), it’s not a good idea to start marketing to your new leads as if they are ready to buy. By only sending emails like “start your free trial today” and “48 hour sale starts now!” you will turn most people off and give them a good reason to unsubscribe.

Ensure all your links work correctly
There’s nothing more frustrating for you or your subscribers than when a link is broken. Think of all the time and effort you put into copy writing, getting your formatting just right, segmenting your list and building your landing page. If your call-to-action link is useless, the email and landing page are useless and your subscribers aren't going to hunt the information out for themselves.

Don’t use deceptive subject lines
I know it’s difficult to get people to open your emails but using deceptive subject lines to encourage email opens will only lead to angry unsubscribes once the recipient realises you mislead them.

Make it easy to unsubscribe
The key to ensuring customer satisfaction is to make the unsubscribe process easy. The link should be visible, underlined and a one click unsubscribe process.

Don’t forget mobile users
Almost 45% of all emails are opened on a mobile device. If you fail to make your emails mobile responsive you’re just asking for your mobile users to unsubscribe from your email list. Don’t expect your subscribers to zoom, pinch and scroll all over their smartphones or tablet in order to read your email – they won’t.

Deep fried whitespace

Much ado about nothing
Recently I was introduced to the joys of whitebait. With no previous experience or desire to eat tiny fish whole and knowing all the ick that slops around inside a regular fish, I wasn’t hugely keen. Turns out I was missing out; whitebait are quite delightfully crunchy and the fact that you can see their little eyes bulging as you bite them in half isn’t off-putting at all.

Whitebait, however, are mostly unrelated to whitespace. Both are liable to be misunderstood and can even be considered controversial, but delightful when used appropriately.

Whitespace (definition)The areas of a page without print or pictures.

Whitespace is the absence of things, the space between elements, the gaps that let the eyes "rest" between images or sections of text. It's the breathing space of the page, the elbow room in your design, an ocean between continents. Within images and logos a near identical phenomenon can be found in negative space, best described as the part of the design created by the rest of the design. One of the most famous examples of negative space is the arrow (shown in red below) within the FedEx logo created by Lindon Leader in 1994.



Why use whitespace?
How about increased legibility and audience attention? Do you need a powerful way to imply elegance, openness and freshness? Whitespace creates an aura of classiness and calm, yet draws attention better than a design crammed with information.

Getting an eel for it 
I believe it's important to consider the use of whitespace in every design; even if you're making something that doesn't have an excessive degree of whitespace, you'll always be using it to some degree. The gaps between words and characters is sometimes referred to as 'micro whitespace', the handling of which can make or break a design.

These 'gaps' between lines (and carriage returns) perfectly highlight the importance of whitespace - you don't even notice it's there, but it's creating balance and breathing room in the text. If it works so well here, it's only a tiny jump to using space throughout a page for a similar effect.



Fun fact: Whitespace doesn’t have to be white, the name is simply a throwback from the origins of the term in 1946, when the majority of publications were printed on white stock. 

Sea water mean?
Whitespace is an extravagance left over from the old days. Look, it says, we don't need your money; we're so wealthy and confident we'll make our message small and waste the rest of this paper. You'll buy from us because you can tell we must be the best at what we do. 

Overfishing
The danger with whitespace is to overdo it and end up with a design that looks unfinished, untidy or broken. Sometimes this can be a fine line to tread, but within an email all you need to do is to keep a relationship between elements and keep this relationship consistent. For instance, a carriage return between paragraphs creates a nice pause, but 3 carriage returns might lose the relationship between them and make people think the topics are separate.

Consistency is key with good whitespace management. If you have a carriage return between heading and body copy, keep it that way throughout. If your images are 250px wide and centred, continue in this format. It's always good to have a friend or colleague look over your work and judge it as unflinchingly as your intended audience will.

Fin.
Without a doubt a consideration of whitespace is vital to every design. In our day to day life in email design we're constantly striving to achieve the right balance of content and space for every client. Good use of whitespace is all about balance, so it takes practice to get a feel for how much to use in any given situation, but it's always worth spending the time.

Product photography? Easy.

I’m not a professional photographer, or even a gifted amateur. Occasionally I get lucky and snap something amazing, but mostly I spend my camera time experimenting and learning. As a result, I’ve discovered some pretty cool stuff, some of which is even relevant to my work. In this post I’ve got some simple tips to share with you on how to improve your product photography.

The assumption for all these tips is that you’re using a basic point and shoot digital camera, handheld, with no access to image manipulation software.

Hold it right there
This may seem obvious, but you need to hold the camera as still as possible when you take a photo. Depending on the camera you're using, it may also be good to hold it still a second or so after you press the button, as some older cameras have a bit of lag time until they actually take the photo. Try and press the button down as gently as possible - you should have it halfway down already for the autofocus, so squeeze it down the rest of the way like you're taking out the last Jenga block!

The technique: Get into a comfortable position, hold the camera with both hands and breathe out slowly. As you breathe out, gently press the shutter button down fully.

Up close and personal
Detail is key if you’re looking to buy something, so be prepared to get a few close-up shots. My tip here is to watch your angles, ensure there’s enough light (more on these subjects shortly) and consider using Macro mode (usually a flower icon) on your camera. This lets you focus closer to an object and limits your depth of field, so the parts in focus are very sharp and everything else is blurred. This helps, well, focus your audience on your subject matter of choice.

Composition
It should go without saying that your product needs to be in the frame. Unless you’re doing a close-up detail shot you should ensure that your product is in the centre of the shot (more or less) with a bit of space from the edge of the image. If a shadow of the product is in the frame try to ensure this is not cropped off either.

The angle of the dangle
It depends on what kind of product you’re shooting, but angle is important too. Let’s take the humble coffee mug. Ideally you’ll take several angles – dead straight with the handle out to the right showing the design on the front, from directly above, showing the shape of the container, and maybe one from the back too. If you wanted something a bit more interesting you could take a shot of it full of coffee in someone’s hand – for this you’d want to consider the angle on both the person and the mug.



Try it: Shoot your product close up on a bare table at a low angle (so your camera is level with the object) with a plain, preferably white wall behind it. Use Macro mode and try fill-in flash before you resort to reflectors (see Lighting section below)

Background
A big part of composition is the background, or other objects in view. If you’re not shooting on a plain background, you should try and throw your background out of focus. The key to this is the Aperture, which you can quite often control, but it’s a bit fiddly so we’ll stick to the easy way, which is usually to use Macro mode and get as close as possible! If your camera has optical zoom, try zooming in as this will likely help blur out the background too - you may need to step back to keep the same composition!

Tip: Never use digital zoom for anything, ever. All this does is crop the image, leading to poor definition and blurry or blocky images. Most cameras will tell you which you’re using, and some let you disable digital zoom in the menu settings.

Lighting
Adequate light is essential for the best professional-looking images. Because of the way the human eye works, what looks like enough light to us isn’t enough light for a camera. The easiest way to enhance your lighting setup is to use the sun and at least one reflector (a sheet of aluminium foil shiny side up is fine as a reflector, although it’s easier to manipulate if you wrap it round something sturdy), preferably more. You can prop these up around your object. What you’re aiming to do is get overall even lighting and removing any shadows on the object itself. If your camera has a ‘Fill-in Flash’ setting experiment using this in addition to reflectors.

Tip: On the whole (unless the fill-in flash method works well for you), you'll want to turn the flash off. The light it produces will usually be too harsh and overexpose the image. If you must use it, try to diffuse it a little. Gently tape some greaseproof or tracing paper over the flash bulb and do a few test shots.

If it’s a dark day and you need to use a light, feel free – try a desk lamp with a bendy neck – but use a reflector to direct it onto your object to soften the light and eliminate shadows, and remember to change your White Balance settings to compensate. Older ‘normal’ lightbulbs are covered by the Tungsten setting which usually has a lightbulb icon, but energy saving bulbs are often whiter, so you may need to use the fluorescent tube setting if you have one.

White balance
Most people (including me) get all lazy over this one. White balance is a measure of the ambient colour temperature of the scene – ranging from red, through orange and yellow, visiting pure white, then out to blue and purple. Ideally you need to use ‘Custom White Balance’ and hold a sheet of paper in front of the camera to get a reading, but most cameras come with presets that do the job well enough in most circumstances. Try several and aim to match the conditions – for example if you’re shooting outside on a cloudy day, most likely you want the Cloudy setting.

Consistency
This is more about how you display your product shots. It’s good practice to keep lighting, composition and background consistent across your product range. I find it helpful to take a photo of your setup and make a note of all the settings used.

Size does matter
Most cameras come preset to their highest detail settings, usually measured in Megapixels. For most people it's best to leave it on the highest setting as it gives you get the highest possible quality, the biggest photo sizes for prints, and also the ability to crop the image (to get a better composition) and still retain good quality. My advice is to always shoot in the highest quality you can and resize afterwards as required.

Having said that, I don't mind resizing images - I use software or batch-process them online using free resizing tools. However, if you find this step onerous and if you only ever want to use these images on screen, for instance on a website or in an email, then it is possible to cheat. The image size option is usually buried in the menu system rather than instantly available and you'll need to experiment a little, but try using the several smallest Megapixel settings. Take test shots with each, then transfer them to your computer and compare the file sizes. It could be that the file size is small enough to upload to websites and emails without resizing at all, but do check the images against high Megapixel ones to ensure you're happy with the quality.

And don't forget to change the settings back to high when you're finished!